Question

我有一些行和一个带有列规格的数组。我遍历行，然后遍历列，并添加包含某些内容的TD。到目前为止，它仍然有效。但是，当我尝试将组件添加到这些TD或仅使用指定[[ngModel）]添加标签时，浏览器崩溃。

有什么想法吗？

columns = [
  {
    "name": "id",
    "text": "User ID"
  },
  {
    "name": "description",
    "text": "Description"
  },
  {
    "name": "test",
    "text": "Test"
  }
];

rowsFiltered = [
  {
    "checked": false,
    "id": "63",
    "name": "charvaldef-2",
    "description": {
      "html": ""
    },
    "test": {
      "dropdown": true,
      "multiple": false,
      "items": [
        {
          "value": "val1",
          "text": "Text 1",
          "selected": true
        },
        {
          "value": "val2",
          "text": "Text 2"
        }
      ]
    }
  }
]

<table>
    <tbody>
        <tr *ngFor="let row of rowsFiltered;">
            <td *ngFor="let col of columns;">
                <ng-container *ngIf="col.name === 'test' && hasOwnProperty(row[col.name], 'dropdown')">
                    <input>
                    {{col.name}}
                </ng-container>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

由于这是打字稿，因此您可以利用?.来解决这种情况下的问题。

<ng-container *ngIf="col.name === 'test' && row[col.name]?.dropdown">

Working Example

如果您要坚持使用hasOwnProperty，则需要将行更改为：

<ng-container *ngIf="col.name === 'test' && row[col.name].hasOwnProperty('dropdown')">

Answer 2

好吧...我不是通过遍历列而是遍历列名数组（string []）解决了这个问题。

仍然不明白为什么这是个问题。

Answer 3

我不确定您为什么对此有疑问？这是一个repro，我在每个字段中都做一个简单的ngModel，遍历列：

https://stackblitz.com/edit/angular-8anun8

似乎工作正常！：）

Angular2：添加组件时无限循环

3 个答案: