如何显示带有角下拉的动态表以及如何将每一行推送到另一个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']
    }
];

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

1. 如何在动态表中显示下拉列表，在我的动态数据中，我想将“任务”字段显示为下拉列表，以便用户可以选择下拉列表。
2. 目前，我在divOne .How中显示上面的动态表，我可以将它推送到divTwo，我指的是另一个分区，在这里是空的，我想选择行或者我选择的行，我想将它发送到空的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上看到了这个直播

Answer 2

你可以尝试类似的方法。

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

    <td>
        <span>{{data.name}}</span>
    </td>
<td>
        <span>{{data.job}}</span>
    </td>

<td>
        <span>{{data.year}}</span>
    </td>
    <td>
  <option *ngFor="let mission of data.mission" 
   [selected]="mission.name == 'back'">{{mission.name}}</option>
    </td>
</tr>

​

工作样品

Answer 3

看看下面正在运行的代码

堆栈闪电战，源

演示

我已经把你的数据显示在桌子上了。在这里你可以

1. 单击以将行从一个表传输到另一个表
2. 也可以从下拉列表中进行选择