Question

我有以下一组来自JSON文件的数据，我试图通过模板中的“ * ngFor”显示这些数据。我可以显示除“人物”对象之外的大多数对象。可以有任意数量的“人”对象。此示例数据集仅包含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>

请帮助我

Answer 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>

Answer 2

尝试

<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>

Answer 3

您应该在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

Answer 4

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

您需要使用 ngFor 循环遍历 caseData 时，需要循环遍历整个数据数组，然后循环遍历 people 数组，如下所示：

ComponentName.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"
  }]
 }]

ComponentName.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>

Answer 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>

通过* ngFor数组中的角度显示对象

5 个答案: