lặp một đối tượng JSON trên Ngfor ở góc 2

Question

Tôi đang gặp rắc rối lặp một đối tượng json theo Ngfor, có mẫu của tôi:

mẫu:

<h1>Hey</h1> 
    <div>{{ people| json}}</div> 
    <h1>***************************</h1> 
    <ul> 
    <li *ngFor="#person of people"> 
     {{ 
      person.label 
     }} 
    </li> 
</ul> 

người là đối tượng json mà tôi đang cố gắng để lặp, tôi đang gặp RHE kết quả của (người | json) và không nhận được danh sách, đây là một ảnh chụp màn hình:

và để kết thúc, đây là một phần của tệp json:

{ 
"actionList": { 
"count": 35, 
"list": [ 
    { 
    "Action": { 
     "label": "A1", 
     "HTTPMethod": "POST", 
     "actionType": "indexation", 
     "status": "active", 
     "description": "Ajout d'une transcription dans le lac de données", 
     "resourcePattern": "transcriptions/", 
     "parameters": [ 
      { 
       "Parameter": { 
        "label": "", 
        "description": "Flux JSON à indexer", 
        "identifier": "2", 
        "parameterType": "body", 
        "dataType": "json", 
        "requestType": "Action", 
        "processParameter": { 
         "label": "", 
         "description": "Flux JSON à indexer", 
         "identifier": "4", 
         "parameterType": "body", 
         "dataType": "json", 
         "requestType": "Process" 
        } 
       } 
      }, 

xin vui lòng giúp tôi

Answer 1

đối tượng people của bạn không phải là một mảng, do đó bạn có thể lặp trên nó ra khỏi hộp.

Có hai lựa chọn:

• Bạn muốn để lặp qua một tài sản phụ. Ví dụ:

  <ul> 
      <li *ngFor="#person of people?.actionList?.list"> 
      {{ 
       person.label 
      }} 
      </li> 
  </ul> 
  

• Bạn muốn lặp qua các phím của đối tượng. Trong trường hợp này, bạn cần phải thực hiện một đường ống tùy chỉnh:

  @Pipe({name: 'keys'}) 
  export class KeysPipe implements PipeTransform { 
      transform(value, args:string[]) : any { 
      if (!value) { 
       return value; 
      } 
  
      let keys = []; 
      for (let key in value) { 
       keys.push({key: key, value: value[key]}); 
      } 
      return keys; 
      } 
  } 
  

  và sử dụng nó theo cách này:

  <ul> 
      <li *ngFor="#person of people | keys"> 
      {{ 
       person.value.xx 
      }} 
      </li> 
  </ul> 
  

  Xem câu trả lời này để biết thêm chi tiết:

  • How to display json object using *ngFor