-1

I have an Object like this:

myComponent.ts

this.detailsStruct = this.newParameter.struct;
 //the value of detailsStruct is:
            //{0: "something",
            // 5: "somethingElse"}

where the data of detailsstruct are coming from my mongoDb and I want to have an input form that displays keys and values of my object. In the html I did something like that:

myComponent.html

<div class="form-group" *ngFor="let s of detailsStruct ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="s.value" placeholder="" name="{{s[i]}}">
   </div>
</div>

I am trying to get something from my object but what I wrote does not work. Any suggestions? Thanks

Improve this question
2
  • Is detailsStruct is object? paste entire detailsStruct Commented Jun 19, 2019 at 10:21
  • Yes detailsStruct is an Object structured like I described above in the comment of the myComponent.ts Commented Jun 19, 2019 at 10:23

4 Answers 4

Reset to default
0

you can try:

<div class="form-group" *ngFor="let key of objectKeys(detailsStruct) ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="detailsStruct[key]" placeholder="" name="{{detailsStruct[key]}}">
   </div>
</div>

ts:

objectKeys = Object.keys;
  detailsStruct = {0: "something",
            5: "somethingElse"}

DEMO.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

If detailsStruct is an object then,

<div class="form-group" *ngFor="let s of Object.keys(detailsStruct) ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="detailsStruct[s]" placeholder="" name="s{{i}}">
   </div>
</div>
Improve this answer

Comments

0

Please Try this code: Link https://stackblitz.com/edit/angular-hh82ed

<div class="form-group" *ngFor="let s of detailsStruct ; let i = index">
 <div class="input-group">
  <input type="text" class="form-control" [ngModelOptions]="{standalone: 
true}"
  [(ngModel)]="s[i]" placeholder="" name="{{s[i]}}">
   </div>
</div>

import {AfterViewInit, Component, ElementRef, ViewChild,Renderer2,OnInit} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private renderer: Renderer2, private el: ElementRef) {}
  detailsStruct=[];
  detailsStruct = [{0:"one"},{1:"two"}];
}

Thanks

Improve this answer

4 Comments

Yes, I could be a nice staring point but I get the data from mongoDb and they are not an array of object but an object with key and value and I want two input value per row: one for the value and one for the key. In your case I would like to have in one row "0" and "one" and in the other row "1" and "two"
Can you please show the format in which you are getting the data from mongoDB i can help you out
the value of detailsStruct is: {0: "something", 5: "somethingElse"}
i think you should change the format of how you are getting data in result for ease of access
0

You may use this way, I hope this will help to play with your data

for (let obj of this.detailsStruct) {
        for (let prop of Object.keys(obj)) {
            console.log("value-" + obj[prop]);
            console.log("key-" + [prop]);
        }
    }
Improve this answer

2 Comments

The data are coming from my db so I can only get the data that are in that format
Okay, you may play with using loop with your first main object and then play with key and value in second loop.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.