Ich habe ein Array von Objekten (list: any[]), die ich in einem *ngFor Ausdruck verwende. Ist es möglich, eine der Eigenschaften des Objekts anzuzeigen, wenn ich den Eigenschaftsnamen zur Laufzeit kenne?

Ich erstelle eine Komponente namens ListComponent, die eine Liste von Elementen anzeigt. Die übergeordnete Komponente mit dem Namen ParentComponent übergibt das Objektarray und die Eigenschaft, die ListComponent in der Liste anzeigen soll. Folgendes habe ich bisher im ListComponent:

<div>
<div class="item" *ngFor="let item of itemList">{{item.name}}</div>
</div>

Ist es möglich, anstelle von {{item.name}} den Teil .name dynamisch zu gestalten und die von ParentComponent übergebene Eigenschaft zu verwenden?

3
Ben Phung 18 Jän. 2019 im 06:53

3 Antworten

Beste Antwort

Sie können in Ihrer .ts-Datei eine 'dynamicKey'-Variable erstellen, die sich ändert, und wie unten beschrieben darauf zugreifen. Optional können Sie auch eine Standardzeichenfolge oder eine leere Zeichenfolge für den Fall angeben, dass diese nicht definiert ist.

<div>
    <div class="item" *ngFor="let item of itemList">{{item[dynamicKey] || ''}}</div>
</div>

Ein anderer Ansatz kann darin bestehen, ein Array aus dem Objekt basierend auf Ihrem dynamischen Schlüssel zu erstellen, um die Logik in den Vorlagen zu reduzieren.

dynamicArray = itemList.map(item => item[dynamicKey])
<div>
    <div class="item" *ngFor="let item of dynamicArray">{{item}}</div>
</div>
0
Dhananjai Pai 18 Jän. 2019 im 04:32

Versuchen Sie es mit dem folgenden Code. Hier ist der Name eine Variable, die von der Komponente aus dynamisch sein kann.

<div>
<div class="item" *ngFor="let item of itemList">{{item[name]}}</div>
</div>
0
Venkatesh K 18 Jän. 2019 im 04:24

Komponente

  @Input()  parentKey
  itemList=[{key:'State',value:'state'},
  {key:'Severity',value:'severity'},
  {key:'Priority',value:'priority'},
  {key:'Category',value:'categorization'},{key:'Owner',value:'owner'}

HTML

<div>
<div class="item" *ngFor="let item of itemList">{{item[parentKey]}}</div>
</div>

Stackblitz-Link: https://stackblitz.com/edit /angular-fakfmp?file=src/app/app.component.html

0
arun kumar 18 Jän. 2019 im 06:44