3

I'm using angular6 and I'm trying to loop over the properties of an object, which i load in advance, to show them in text fields. The properties are supposed to be changeable. Therefore i need a two-way-binding.
I tried:

<mat-form-field *ngFor="let key of object | keys">
  <input matInput placeholder="{{key}}" name="attribute" [(ngModel)]="object[key]">
</mat-form-field>

with

@Pipe({
  name: 'keys'
})
export class ObjectKeysPipe implements PipeTransform {
  transform(value: object, args: string[]): any {
    return Object.keys(value);
  }
}

i've also tried

<mat-form-field *ngFor="let property of object | keysValue">
  <input matInput placeholder="{{property.key}}" [(ngModel)]="property.value">
</mat-form-field>

with

@Pipe({
  name: 'keyValue'
})
export class ObjectKeyValuePipe implements PipeTransform {
  transform(value: object, args: string[]): any {
    const arr = [];
    const keys = Object.keys(value);
    const values = Object.values(value);
    for (let i = 0; i < keys.length; i++) {
      arr.push({'key': keys[i], 'value': values[i]});
    }
    return arr;
  }
}

but the two-way-binding doesn't work.

I get my object from a databse via HttpClient and assign it in ngOnInit()

ngOnInit() {
this.apiService.getObject(objectId).subscribe(
  res => {
    if (res.status === 200) {
      this.object = res.body;
    }
  }
);}

Is there any other possibility to solve my problem?

S14p
  • 51
  • 1
  • 7
  • I made a stackblitz, and it seems like the first solution works. What does object look like? Is the problem in one direction or both? https://stackblitz.com/edit/angular-xglnqp – ShamPooSham Sep 26 '18 at 09:05
  • The object varies from case to case. It could be { ci: null cpu_anzahl: 1 cpu_typ: "Intel(R) Core(TM) i5-5300U CPU @ 2.30GHz" } I can edit the values, but they dont show up when i initialise the site. – S14p Sep 26 '18 at 12:16
  • So you get it from a http server in some way? I think the error lies in how you assign the result, and you need to keep in mind that it's asynchronous calls – ShamPooSham Sep 26 '18 at 12:28
  • Yes i get it from a database. I posted the code above. The Service does just a simple get call. Shouldn't my input component check if something changed as soon as i assign my result? – S14p Sep 26 '18 at 12:45
  • That's true.. Is `this.ci` what you refer to as `object` in your template? I think the ngFor will just run in the beginning, so you might need to to but `` around it – ShamPooSham Sep 26 '18 at 13:00
  • Yes this.ci is my object. Unfortunately the ng-container doesn't work. – S14p Sep 26 '18 at 13:07
  • And you're sure that the object gets assigned? – ShamPooSham Sep 26 '18 at 13:13
  • yes as if i try it with a known object and without ngFor everything works fine. – S14p Sep 26 '18 at 13:17
  • Very weird. I updated the stacklitz to make a fake server call with a delay, but it still works. There must be something else in your code that is causing this. – ShamPooSham Sep 26 '18 at 13:23
  • What happens if you use just `{{object | json}}` in your template instead of the ngFor? – ShamPooSham Sep 26 '18 at 13:24
  • That's true, it's weird. I have no clue what in code could be the problem. {{object | json}} shows the assigned values – S14p Sep 26 '18 at 13:30
  • if i use {{object | json}} and ngFor, i can type something into one of my empty input elements and the {{object | json}} gets updated – S14p Sep 26 '18 at 13:34
  • @S14p I know this solution isn't as cool, and not as 'Angular-ee' but you could always do an object.keys call on the get results, and form an array, then feed that array to the ngfor – FussinHussin Sep 26 '18 at 14:13
  • @FussinHussin That would give just the keys, but i already have the keys and the ngFor works fine. The problem is, that the values of the properties aren't shown in the input fields as they are supposed to. Sry if i didn't point that out. – S14p Sep 26 '18 at 14:48
  • hm sure thing, well the fastest way to solve this would be if you put up a stack blitz :) – FussinHussin Sep 26 '18 at 15:06
  • I couldn't reproduce my error so i tried a few things. The problem was that my input fields had all the same name.... thank you all for your help – S14p Sep 27 '18 at 09:09

1 Answers1

-1

Thanks to everyone for your help. The problem was that all input fields had the same name.

S14p
  • 51
  • 1
  • 7