Angular 6/7，ngIf在ngFor内

Question

我正在尝试以角度显示一组数据。数据采用键值形式。我正在使用* ngFor进行迭代。 问题在于值部分在所有记录中都不统一。在某些记录中，它是一个字符串，在某些记录中，它是一个数组。因此，在这些情况下，它会在我的页面中显示[Object object]。

我如何使用* ngIf遍历value字段中的内部数组，这是我的问题。

部分代码

<div class="row" *ngFor='let item of model'>
<div class="col-md-4">{{item.key}}</div>
<div class="col-md-8 " data-toggle="collapse" >{{item.value}}</div>
</div>

我想知道如何在* ngIf中使用另一个* ngFor，以及* ngIf应该具有什么条件。

Answer 1

在组件中具有一个函数，该函数可以检查值并判断它是字符串还是数组。

checkValue(val) {
    return val instanceof Array;
}

<div class="row" *ngFor='let item of model'>
    <div class="col-md-4">{{item.key}}</div>
    <ng-container *ngIf="checkValue(item.value) else stringValue">
        <span class="col-md-8 " *ngFor='let subItem of item.value' data-toggle="collapse" >{{subItem}}</span>
    </ng-container>
</div>

<ng-template #stringValue>
   <div class="col-md-8 " data-toggle="collapse" >{{item.value}}</div>
</ng-template?

Answer 2

遵循以下原则：

app.component.ts

.
.
.
 model = [
    {
      key: 'ContextNameSpaces',
      value: [{ a: 1, b: 2 }, { a: 3, b: 4 }]
    },
    {
      key: 'ContextNameSpaces',
      value: 1
    }
  ];

  isObject(val) {
    return typeof val === 'object';
  }

.
.
.

app.component.html

<div *ngFor="let item of model">
  {{item.key}}
  <ng-container *ngIf="isObject(item.value); else elseTemplate">
    <span *ngFor="let j of item.value">
      {{j.a}}
    </span>
  </ng-container>
  <ng-template #elseTemplate>
    {{item.value}}
  </ng-template>
</div>

Answer 3

您可以尝试以下操作：

对象：

object = [
{
  "id": 1,
  "test": "test1",
  "name": ["abc", "pqr"]

},
{
  "id": 2,
  "test": "test2",
  "name": ["abc2", "pqr2"]

},
{
  "id": 3,
  "test": "test3",
  "name": ["abc3", "pqr3"]

},
{
  "id": 4,
  "test": "test4",
  "name": ["abc4", "pqr4"]
}];

对于代码：

ngOnInit() {
  for (let item of this.object) {
    for (let i in item) {
      if (typeof (item[i]) === 'object') {
        item[i].forEach((e: any) => {
          console.log("runseprate", e)
        });
      }
    }
  }
}