Angular6 如何在angular7中将下拉列表插入到动态表中

Angular6 如何在angular7中将下拉列表插入到动态表中,angular6,angular7,angular8,Angular6,Angular7,Angular8,试图在动态表中插入下拉列表,但我不知道如何操作。我想在最后一列插入带有一些值的下拉列表。请帮助任何人找到解决方案 head = [ "Name", "Age", "Gender","Action"]; details = [ { "name": "star1", "age": "25", "gender": "male","action": "" }, { "name": "star2", "age": "22", "gen

试图在动态表中插入下拉列表,但我不知道如何操作。我想在最后一列插入带有一些值的下拉列表。请帮助任何人找到解决方案

  head = [   "Name",  "Age", "Gender","Action"]; 

  details = [ 
            { "name": "star1", "age": "25", "gender": "male","action": "" }, 
             { "name": "star2", "age": "22", "gender": "female","action": "" },
            { "name": "star3", "age": "21", "gender": "male","action": "" },
             { "name": "star4", "age": "35", "gender": "female","action": "" },
        ]; 

  constructor(){
      this.tableHead = this.head; 
      this.userDetails = this.details;
  }

演示:

我为您提供了一个解决方案。请将您的详细信息数组替换为

details = [
      { name: "star1", age: "25", gender: "male", action: ["Edit", "Delete"] },
      { name: "star2", age: "22", gender: "female", action: ["Edit", "Delete"] },
      { name: "star3", age: "21", gender: "male", action: ["Edit", "Delete"] },
      { name: "star4", age: "35", gender: "female", action: ["Edit", "Delete"] }
];
然后将dynamic table.component.html替换为下面的代码

<table>
  <thead>
    <tr class="table-head">
      <th *ngFor="let tableHead of tableHeads">{{tableHead}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let tableData of tableDatas">
      <td *ngFor="let colName of tableColNameGenerated"> {{colName != 'action' ? tableData[colName] : ''}}
        <span *ngIf="colName == 'action'">
          <select>
            <option *ngFor="let opt of tableData.action">{{opt}}</option>
          </select>
        </span>
      </td>
    </tr>
  </tbody>
</table>

{{tableHead}}
{{colName!=“action”?tableData[colName]:''}
{{opt}}
现在我希望你的担忧得到解决。 希望这有帮助! 多谢各位