通過* ngFor數組中的角度顯示對象

Question

我有以下一組數據，這些數據來自我想通過模板中的“ * 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>

請幫我

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

Answer 4

JSON數組僅包含1個具有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>