Angular 6/7，ngIf 内的 ngFor答案

【问题标题】：Angular 6/7, ngIf within ngForAngular 6/7，ngIf 内的 ngFor
【发布时间】：2019-09-18 22:11:38
【问题描述】：

我正在尝试以角度显示一组数据。数据是键值形式。我正在使用 *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 应该具有什么条件。

【问题讨论】：

如果值是对象或数组，我们必须显示什么？作为键值对或整个对象作为 json 字符串？
您可以发布您的实际 JSON 文件数据吗？

标签： angular angular7

【解决方案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?

【讨论】：

【解决方案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>

【讨论】：

【解决方案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)
        });
      }
    }
  }
}

【讨论】：

嗨 digvijay，也许您的代码在语法上是错误的。 i 被声明为项目类型的对象。然后将其用作索引。这是错误的代码老板
你好 santubanglore 我在我的 VS 代码编辑器中运行这些代码它会运行良好没有错误...第一个 forloop 是对象中的项目，第二个 forloop 是嵌套的 forloop，它也代表项目内的项目..然后不管索引...你可以运行这些它会给你对象中的每个项目
嗨 digvijay，那是因为您的数据可能被定义为统一数组类型。我的数据正好相反。有些是数组，有些是字符串。这就是为什么我觉得它很有挑战性。