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

Question

提问by Madpop

Here I am getting below as dynamic data

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

[
    { 
        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']
    }
];

And here I can display this dynamic data in table using angular 2*ngForbut here the problem I'm facing is :

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

How to display the Dropdowns in the dynamic table here in my dynamic data I want to display "missions" field as dropdown so that user can select the dropdown.
Presently I am displaying the above dynamic table in divOne .How can I push it to the divTwo I mean another Div which is empty here I want to select the row or which ever row i select i want to send it to the empty div how can perform these actions

如何在我的动态数据中的动态表中显示下拉列表我想将“任务”字段显示为下拉列表，以便用户可以选择下拉列表。
目前我正在 divOne 中显示上面的动态表。我怎么能把它推到 divTwo 我的意思是另一个空的 Div 我想选择行或我选择的哪一行我想把它发送到空的 div 怎么能执行这些操作

Below is my html code :

下面是我的 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>

Above is my code, here I dynamically getting data except "missions" I don't know how to show dropdown in dynamic table i mean in each row and how to select each row & select all of them and push it to another div

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

Answer 1

采纳答案by void

You can iterate on the Tablearray and can build your first table. *ngForstructural directive should be on the <tr>instead of the table.

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

Also I have attached a click handler, this will get fired once you will click on the 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>

As you must be seeing your table now. When you will click on any row, addToAnotherTable(i)will get fired, which will push the index of the clicked row in some array.

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

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

Now this array will be the array we will be using to build another table.

现在这个数组将是我们用来构建另一个表的数组。

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

will make another table. As it is looping over the values of secondaryTable.

将制作另一张桌子。因为它循环遍历的值secondaryTable。

You might want to modify the functionality of addToAnotherTablebased on your need. Like if you want to toggle the rows in table 2 on click of row in table 1 then you might use this function

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

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

or you might want to add sorting on the data and so on...

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

See this live on stackblitz:https://stackblitz.com/edit/angular-w2m94j

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

Answer 2

回答by Eldho

You can try similar to this.

你可以试试类似的。

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

Working sample

工作样本

Answer 3

回答by Abhijit Kar ツ

Have a look at the running code below

看看下面的运行代码

I have taken your data and displayed it as a table. Here you can

我已经获取了您的数据并将其显示为表格。在这里你可以

Click to transfer rows from one table to the other
And be able to select from drop down as well

单击以将行从一个表转移到另一个表
并且也可以从下拉菜单中进行选择

Answer 4

回答by Guillaume Le Mière

ng-templateis made exactly for your case. Try it out. In this example you can select/deselect multiple missions per element, and show it to the user without using an extra input.

ng-template完全适合您的情况。试试看。在此示例中，您可以选择/取消选择每个元素的多个任务，并在不使用额外输入的情况下将其显示给用户。

The advantage of doing this way is that you will have an easier time styling your dropdown.

这样做的好处是您可以更轻松地设置下拉菜单的样式。

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>
            <td>
              <ng-template ngFor let-mission [ngForOf]="data.missions">
                <p class="mission"
                   [ngClass]="{'selected': data.selectedMissions.indexOf(mission) != -1}"
                   (click)="selectMission(data, mission)">
                  {{mission}}
                </p>
              </ng-template>
            </td>
        </tr>
    </tbody>
</table>

TS

private selectMission(data, mission):void {
  if (!data.selectedMissions)
    data.selectedMissions = new Array();

  if (data.selectedMissions.indexOf(mission) == -1)
    data.selectedMissions.push(mission);
  else
    data.selectedMissions.slice(data.selectedMissions.indexOf(mission));

  console.log(data.selectedMissions);
}

CSS

p.mission.selected {
  background-color:#F0F;
}

Didn't try but it should work. If you want to make something cleaner you can write a new data instead of modifying the current one, and play with the prototypes of your objects.

没有尝试，但它应该工作。如果你想让一些东西更干净，你可以写一个新数据而不是修改当前的数据，并使用你的对象的原型。

You will find out how to style your page in order to make a dropdown here

您将在此处了解如何设置页面样式以创建下拉列表

Answer 5

回答by Swoox

Just make an call to your backend that return all missions:

只需调用返回所有任务的后端即可：

['MA-7', 'MA-6','STS-95', 'Apollo 1', 'MR-4']

Then in the html you can make a dropdown with:

然后在 html 中，您可以使用以下内容进行下拉：

<option *ngFor="let mission of missions"

Answer 6

回答by Arjun Panicker

The coding for the above scenario will take some time so I will explain you the procedure you have to follow:

上述场景的编码需要一些时间，所以我将向您解释您必须遵循的程序：

Create another column in your first table to provide a checkboxfor selecting each row or multiple rows and bind the valueof checkbox to the idproperty in your data.
Create a button and on clickevent, call a method to get the ids of the selected rows from the checkbox values.
Using the ids you have got, use the splicemethod on the array to remove the data from the array and add these data(s) to another array. Any further additions can be made to the array using the pushmethod.
Create a table just like the one you have in the divtwo also.
Use *ngIfon the second array to show or hide the table according to the length of the second array.
Whenever an addition is made to the second array, you second div will render it as a new row and similarly since you are using the splicemethod on the first array, the respective rows will be removed from the first table.

在您的第一个表中创建另一列以提供checkbox用于选择每一行或多行并将valueof 复选框绑定到id数据中的属性。
创建一个按钮并在click事件上调用一个方法来从复选框值中获取所选行的 id。
使用您获得的 id，使用splice数组上的方法从数组中删除数据并将这些数据添加到另一个数组中。可以使用该push方法对阵列进行任何进一步的添加。
创建一张表格，就像您在div两者中拥有的表格一样。
用于*ngIf第二个数组，根据第二个数组的长度显示或隐藏表格。
每当对第二个数组进行添加时，第二个 div 会将其呈现为新行，同样，由于您splice在第一个数组上使用该方法，相应的行将从第一个表中删除。

Please do try this method out and if you face any issues, create a plnkror stackblitzcode so that I may help you further.

请务必尝试此方法，如果您遇到任何问题，请创建plnkr或stackblitz代码，以便我可以进一步帮助您。

I have created a sample application based on your scenario. Check out this link. I have forked you code and edited it.

我已经根据您的场景创建了一个示例应用程序。查看此链接。我已经分叉了你的代码并对其进行了编辑。

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

提问by Madpop

采纳答案by void

回答by Eldho

回答by Abhijit Kar ツ

回答by Guillaume Le Mière

回答by Swoox

回答by Arjun Panicker

相关推荐

最近更新

标签

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

提问by Madpop

采纳答案by void

回答by Eldho

回答by Abhijit Kar ツ

回答by Guillaume Le Mière

回答by Swoox

回答by Arjun Panicker

相关推荐

typescript 如何在TypeScript中检查对象是否具有属性并且属性值是否为真

使用 Mocks 使用 Jest 和 Typescript 进行测试

typescript 如何检查三元运算符中未定义的变量？

typescript 在非无头（非视口）运行时设置 ppeteer 窗口大小

相关推荐

最近更新

标签