Question

我有一个表，其中我想动态地放置表头名称。

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>`

我想生成表头作为对象＆＃34;发言人＆＃34;的主题名称。我该怎么办？

Answer 1

您可以循环使用您正在使用的属性的键作为模型。

有这样的方法：

PREDICTOR_FLOATINGPOINT

在你的模板中有类似的东西：

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

这是PLUNKER

Answer 2

如果要生成动态表头，只需将列名存储在某处（例如columns数组）并执行类似的操作

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

请注意，您可能需要在标题中为按钮列添加空列。在上面的例子中：

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

最后一个条目是按钮列的标题。

Answer 3

将标题名称存储在数组中并对该数组执行ng-reapeat。

$ scope.headernames = [＆＃39;名称＆＃39;，＆＃39;重要事项＆＃39;会话＆＃39;，＆＃39;链接＆＃39;＆＃39;图片＆＃39];

在HTML中：

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

如何将对象属性作为表头？

3 个答案: