Wie legen Sie die Objekteigenschaften als Tabellenkopf fest?

Ich habe eine Tabelle, in der ich den Tabellenkopfnamen dynamisch setzen möchte.Wie legen Sie die Objekteigenschaften als Tabellenkopf fest?

component.html

` <table class="table"> 
     <thead> 
     <tr> 
      <th>NAME</th> 
     </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let speak of speaker"> 
    <td>{{speak.name}}</td> 
    <td>{{speak.matter}}</td> 
    <td>{{speak.session}}</td> 
    <td>{{speak.link}}</td> 
    <td>{{speak.image}}</td> 
    <td><button> Save</button> 
     <button> Edit</button></td> 
    </tr> 
    </tbody> 
     </table>`

Ich möchte den Tabellenkopf als propery Name des Objekts "Lautsprecher" zu erzeugen, kann .Wie ich tun?

Quelle

2017-06-27 Ajith

Da Ihre Tabellenwerte ist sind "hart codiert", es gibt nicht wirklich eine Notwendigkeit, die Header dynamisch zu machen, oder? –

@FredrikLundin Ich muss verschiedene Tabellen mit dieser Tabellenvorlage anzeigen.So will ich es als dynamische Tabelle machen. – Ajith

Wenn Sie einen dynamischen Tabellenkopf generieren möchten, speichern Sie nur die Spaltennamen irgendwo (zB ein columns Array) und tun so etwas wie dieses

<thead> 
<tr> 
    <th *ngFor="let column of columns">{{column}}</th> 
</tr> 
</thead>

Denken Sie daran, Sie müssen möglicherweise leere Spalten hinzufügen in Ihre Kopfzeile für Ihre Schaltflächenspalten. Im obigen Beispiel:

columns = ['name','matter','session','link','image','']

Der letzte Eintrag ist die Überschrift für die Schaltflächenspalte.

Quelle

2017-06-27 11:40:15 jspurim

Jede Option, um es direkt aus dem Lautsprecher zu nehmen – Ajith

Das ist komplizierter, müssten Sie die Eigenschaften des Objekts aufzählen. Angenommen, Sie haben eine leere Sammlung, die in der Tabelle angezeigt wird. Sie hätten kein Beispielobjekt, um die Kopfzeile zu erstellen. – jspurim

Wenn Sie das tun möchten, überprüfen Sie diese Frage, wie Sie [Eigenschaften des TypeScript-Objekts aufzählen] (https://stackoverflow.com/questions/40201970/enumerate-properties-on-typescript-object). Überlegen Sie auch, Ihre Frage zu bearbeiten, da es nicht klar ist, dass Sie gefragt haben. – jspurim

Speichern Sie die Header-Namen in einem Array und führen Sie ng-repeat für dieses Array aus.

$ scope.headernames = ['Name', 'Materie', 'Sitzung', 'Link', 'Bild'];

In HTML:

<thead> 
    <tr ng-repeat="names in headernames"> 
     <th>{{names}}</th> 
    </tr> 
</thead>

Quelle

2017-06-27 11:43:55

Diese Lösung ist die eckige Methode, aber OP verlangt nach eckigen (aka eckel2/4). Ja, was sie mit der Benennung gemacht haben, ist ziemlich verwirrend, und ich überprüfe immer, wenn ich das Tag in einer Frage sehe. – jspurim

Sie können eine Schleife durch die Tasten der Eigenschaft, die Sie als Modell verwenden.

Haben Sie eine Methode wie folgt:

getKeys() { 
    return (this.speakers && this.speakers.length > 0) ? Object.keys(this.speakers[0]) : []; 
}

Und so etwas wie dies in der Vorlage:

<table> 
    <thead> 
    <tr> 
     <th *ngFor="let key of getKeys()">{{ key }}</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let speak of speakers"> 
     <td *ngFor="let key of getKeys()">{{ speak[key] }}</td> 
    </tr> 
    </tbody> 
</table>

hier ein in den `Technischen Delegierten festgehalten PLUNKER

Quelle

2017-06-27 12:00:31

Wie legen Sie die Objekteigenschaften als Tabellenkopf fest?

Antwort

Verwandte Themen