通过 *ngFor 在数组中显示对象答案

【问题标题】：Angular display Object in array via *ngFor通过 *ngFor 在数组中显示对象
【发布时间】：2018-07-17 06:07:17
【问题描述】：

我有以下一组来自我试图通过模板中的“*ngFor”显示的 JSON 文件的数据。除了“人”对象之外，我可以显示大部分内容。可以有任意数量的“人”对象。这个示例数据集中只有 2 个。

  [{
  "caseNumber": "01/01/2020",
  "caseData": {
    "caseType": "Criminal",
    "caseCompName": "",
    "caseCompNumber": "12121212",
    "caseDate": "01/02/2019",
    "caseTime": "12:00",
    "caseStatus": "Open"
  },
  "people": [{
    "name": "Paul",
    "lastName": "Von Zeuner",
    "middleName": "Waldemar",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  },{
    "name": "John",
    "lastName": "Doe",
    "middleName": "Steve",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  }]
 }]

我尝试过这样的事情，但它只显示第一人称。我不确定数组本身的结构是否错误，或者 *ngFor 是否是问题

    <div *ngFor='let item of caseData; let i=index'>
        <div class="row">
          <div class="col-sm">
            Name: {{item.people[i].name}}
          </div>
          <div class="col-sm">
            Last Name: {{item.people[i].lastName}}
          </div>
        </div>
        <div class="row">
          <div class="col-sm">
            Middel Name: {{item.people[i].middleName}}
          </div>
          <div class="col-sm">
            Country of Birth: {{item.people[i].countryBirth}}
          </div>
        </div>
    </div>

请帮帮我

【问题讨论】：

i 是循环遍历 outer 数组项的索引。您需要一个内部循环遍历每个项目的人员数组。

标签： angular

【解决方案1】：

我在stackblitz 上创建了一个工作示例，看看吧。

在component.ts

中

 data =[{
  "caseNumber": "01/01/2020",
  "caseData": {
    "caseType": "Criminal",
    "caseCompName": "",
    "caseCompNumber": "12121212",
    "caseDate": "01/02/2019",
    "caseTime": "12:00",
    "caseStatus": "Open"
  },
  "people": [{
    "name": "Paul",
    "lastName": "Von Zeuner",
    "middleName": "Waldemar",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  },{
    "name": "John",
    "lastName": "Doe",
    "middleName": "Steve",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  }]
 }];

在component.html

中

<div *ngFor='let item of data; let i=index'>
    <div *ngFor="let person of item.people">
        <div class="row">
            <div class="col-sm">
                Name: {{person.name}}
            </div>
            <div class="col-sm">
                Last Name: {{person.lastName}}
            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                Middel Name: {{person.middleName}}
            </div>
            <div class="col-sm">
                Country of Birth: {{person.countryBirth}}
            </div>
            <br>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

你应该在你的 html 中使用 2 ngFor。

试试这个代码：

<div *ngFor='let item of caseData; let i=index'>
    <div *ngFor="let person of item.people" class="row">
        <div class="col-sm">
            Name: {{person.name}}
        </div>
        <div class="col-sm">
            Last Name: {{person.lastName}}
        </div>
        <div class="col-sm">
            Middel Name: {{person.middleName}}
        </div>
        <div class="col-sm">
            Country of Birth: {{person.countryBirth}}
        </div>
    </div>
</div>

Stackblitz Demo

【讨论】：

【解决方案3】：

试试这个

<div *ngFor='let item of people; let i=index'>
    <div class="row">
      <div class="col-sm">
        Name: {{item.name}}
      </div>
      <div class="col-sm">
        Last Name: {{item.lastName}}
      </div>
    </div>
    <div class="row">
      <div class="col-sm">
        Middel Name: {{item.middleName}}
      </div>
      <div class="col-sm">
        Country of Birth: {{item.countryBirth}}
      </div>
    </div>
</div>

【讨论】：

【解决方案4】：

JSON 数组仅包含 1 个具有 3 个属性的对象：caseNumber、caseData 和 people，这是一个对象数组。

您正在使用 ngFor 循环遍历 caseData，而您需要做的是循环遍历 整个数据数组，然后循环遍历people 数组如下：

组件名称.ts：

dataArray =
  [{
  "caseNumber": "01/01/2020",
  "caseData": {
    "caseType": "Criminal",
    "caseCompName": "",
    "caseCompNumber": "12121212",
    "caseDate": "01/02/2019",
    "caseTime": "12:00",
    "caseStatus": "Open"
  },
  "people": [{
    "name": "Paul",
    "lastName": "Von Zeuner",
    "middleName": "Waldemar",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  },{
    "name": "John",
    "lastName": "Doe",
    "middleName": "Steve",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  }]
 }]

组件名称.html

<div *ngFor='let item of dataArray; let i=index'>
    <div *ngFor='let person of item.people'>
        <div class="row">
          <div class="col-sm">
            Name: {{person.name}}
          </div>
          <div class="col-sm">
            Last Name: {{person.lastName}}
          </div>
        </div>
        <div class="row">
          <div class="col-sm">
            Middel Name: {{person.middleName}}
          </div>
          <div class="col-sm">
            Country of Birth: {{person.countryBirth}}
          </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案5】：

<div *ngFor='let item of caseData'>
  <div *ngFor='let person of item.people'>
    <div class="row">
      <div class="col-sm">
        Name: {{person.name}}
      </div>
      <div class="col-sm">
        Last Name: {{person.lastName}}
      </div>
    </div>
    <div class="row">
      <div class="col-sm">
        Middel Name: {{person.middleName}}
      </div>
      <div class="col-sm">
        Country of Birth: {{person.countryBirth}}
      </div>
    </div>
  </div>
</div>

【讨论】：