修改

Question

让我们说，我有这张桌子：

+--------+----------+----
| Device | Serial # |
+--------+----------+----
| Cam1   | AB123    |
+--------+----------+----

由于我事先并不知道要显示的列，所以我通过为每个单元格发送一对密钥/值来构建表。

这就是我用C＃代码获取数据的方式。

List<List<KeyValue>> myTable = deviceRepository.GetKeyValues(int facilityId);

设置为客户端后，myTable中的数据将具有以下结构：

myTable = [
   [ { key: "DeviceName", value: "Device"}, { key: "SerialNumber", value: "Serial #"}, ..],
   [ { key: "DeviceName", value: "Cam1"}, { key: "SerialNumber", value: "AB123"}, ..],
    ...
    ]

在剃刀中，我只需循环浏览列表。

@foreach(var row in Model)
{
  <tr>
       @foreach(var cell in row)
       {
           <td>@cell.Value</td>
       }
  </tr>
}

在Angular中，我看不到如何使用指令。

<tr *ngFor="let myInnerList of myTable">
    //I'd like to loop through the each inner list to build each table cell
</tr>

感谢您的帮助

修改

有可能得到这样的东西吗？即如果列是ID，则显示一个复选框，以便可以选择该行。

@foreach(var cell in row)
{
   if(cell.Key == "Id")
   {
     <td><input type="checkbox" id="row_@cell.Value" /></td>
   }
   else
   {
       <td>@cell.Value</td>
   }
}

这样，每行的第一个单元格将显示一个复选框。

Answer 1

我不确定你要显示什么，你写这个但是它依赖于你的数组在每个数组中的排序相同。如果不是这种情况，您可以添加代码来实现它，也可以创建过滤器。

这相当于你问题中的c＃代码。

<tr *ngFor="let row of myTable">
    <td *ngFor="let col of row">
      {{col.value}}
    </td>
</tr>

如何在Angular 2

修改

1 个答案: