Tengo el siguiente objeto en mi componente que usa mi plantilla para representar divs:
this.myobj = {'machine':['parts':[ {'gears': [{'name': 'AName1'}, {'name': 'AName2'}]}, {'screws': [{'name': 'BName2'}, {'name': 'BName3'}]}, {'rotors': [{'name': 'CName5'}]}, {'shells': [{'name': 'CName2'}]} ]]}Mi código actual es:
<button (click)="setPart('gears')">Gears</button> <button (click)="setPart('screws')">Screws</button> <button (click)="setPart('rotors')">Rotors</button> <button (click)="setPart('shells')">Shells</button> <div *ngFor="let part of machine[0]?.parts[1].gears;let i = index;" style="color:#FFF"> <div> {{part.name}}</div> </div>Mi problema es que quiero hacerlo para poder "cambiar" dinámicamente el ngFor para iterar sobre diferentes partes y crear divs para los nombres debajo de ellos (es decir, 'rotores', 'carcasas') haciendo clic en uno de los cuatro botones de arriba eso. Actualmente, tal como lo tengo, está codificado solo en una sola parte ('engranajes').
Realmente no me gusta la codificación de parts[1].gears , ya que idealmente quiero establecer "1" y "engranajes" usando variables en el alcance. ¿O no es posible tener variables como esta en ngFor?
Cree una propiedad en su componente:
myPart: any;Cambia tu plantilla a:
<div *ngFor="let part of mypart;let i = index;" style="color:#FFF"> <div>{{part.name}}</div> </div>Cambia tu método:
setPart(name: string){ this.myPart = this.myobj.machine[0].parts[name]; }