如何显示带有角度下拉列表的动态表格以及如何将每一行推到另一个div

Question

在这里，我得到以下动态数据

[
    { 
        id: 151, 
        name: 'Alan B. Shepard, Jr.', 
        job: 'Astronaut', 
        year_joined: 1959,
        missions: ['MR-3', 'Apollo 14']
    },
    { 
        id: 152, 
        name: 'Virgil I. Grissom', 
        job: 'Astronaut', 
        year_joined: 1959,
        missions: ['MR-4', 'Apollo 1']
    },
    { 
        id: 153, 
        name: 'John H. Glenn, Jr.', 
        job: 'Astronaut', 
        year_joined: 1959,
        missions: ['MA-6','STS-95']
    },
    { 
        id: 154, 
        name: 'M. Scott Carpenter', 
        job: 'Astronaut', 
        year_joined: 1959,
        missions: ['MA-7']
    }
];

在这里我可以使用angular 2 在表中显示此动态数据，*ngFor但是在这里我面临的问题是：

1. 如何在我的动态数据中的动态表中显示下拉列表，我想将“任务”字段显示为下拉列表，以便用户可以选择下拉列表。

2. 目前我正在divOne中显示上面的动态表。如何将其推到divTwo中，我的意思是另一个Div在这里是空的，我想选择该行，或者我选择的哪一行我都希望将其发送到空div执行这些动作

以下是我的html代码：

<table class="table" *ngFor=let data of Table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>job</th>
            <th>year_joined</th>
            <th>missions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{{data.id}}</td>
            <td>{{data.name}}</td>
            <td>{{data.job}}</td>
            <td>{{data.year_joined}}</td>
        </tr>
    </tbody>
</table>

上面是我的代码，在这里我动态获取除“任务”之外的数据，我不知道如何在动态表中显示下拉菜单，我的意思是每一行以及如何选择每一行并选择所有行并将其推入另一个div

Answer 1

您可以在Table数组上进行迭代并可以构建第一个表。*ngFor结构指令应放在<tr>而不是表格上。

另外，我还附加了一个点击处理程序，一旦您点击，它将被触发tr。

<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
            <th>Year Joined</th>
            <th>Mission</th>
    </thead>

    <tr *ngFor="let data of Table;let i = index" (click)=addToAnotherTable(i)>

        <td>
            <span>{{data.name}}</span>
        </td>
        <td>
            <span>{{data.job}}</span>
        </td>
        <td>
            <span>{{data.year_joined}}</span>
        </td>
        <td>
          <select>
             <option *ngFor="let mission of data.missions">
                {{mission}}
             </option>
          </select>
        </td>
    </tr>
</table>

正如您现在必须看到桌子一样。当您单击任何行时，addToAnotherTable(i)将被触发，这会将被单击的行的索引推入某个数组中。

addToAnotherTable(ind){
  this.secondaryTable.push(ind);
}

现在，该数组将成为我们将用来构建另一个表的数组。

    <tr *ngFor="let data of secondaryTable">
        <td>
            <span>{{Table[data].name}}</span>
        </td>
        <td>
            <span>{{Table[data].job}}</span>
        </td>
        <td>
            <span>{{Table[data].year_joined}}</span>
        </td>
        <td>
          <select>
            <option *ngFor="let mission of Table[data].missions">
             {{mission}}
            </option>
          </select>
        </td>
    </tr>

将制作另一个表。由于它遍历的值secondaryTable。

您可能需要addToAnotherTable根据需要修改的功能。就像如果要在单击表1中的行时切换表2中的行，则可以使用此功能

addToAnotherTable(ind) {
    var index = this.secondaryTable.indexOf(ind);
    if (index > -1) {
      this.secondaryTable.splice(index, 1);
    }
    else{
      this.secondaryTable.push(ind);
    }
  }

或者您可能想对数据进行排序等等。。。

在stackblitz上实时查看此内容： https ://stackblitz.com/edit/angular-w2m94j