ng对于json角度的多个记录抛出错误

Question

在我的JSON中，我有多个记录，但在浏览器中仅显示一个记录。我尝试使用NgFor重复相同的操作，但出现错误。

这是我的JSON

        [
          {
            "regionName": "EMEA",
            "regionCurrency": "USD",
            "orgnazationName": "XYZ",
            "orgnazationSubName": "Miller"
            "Department": [
              {
                "DepartmentName": "Main",
                "FirstName": "David",
                "LastName": "Brown",
                "Band": 2,
                "Salary": 10000.00
              },
              {
                "DepartmentName": "Main 1", 
                "FirstName": "Marry",
                "LastName": "Brown",
                "Band": 2,
                "Salary": 10000.00
              }
            ]
          }
    ]

这是我的ts代码

        export class ModalPopupTrialTypeComponent implements OnInit {
      public rowData: any;
      private unsubscribe: Subscription[] = [];

      constructor(
        private dialogRef: MatDialogRef<ModalPopupTrialTypeComponent>,
        @Inject(MAT_DIALOG_DATA) public Modaldata) {  
          this.rowData = Modaldata;
       }


      ngOnInit() {
        console.log('Modal Data',this.rowData);
      }
      ngOnDestroy() {
        this.unsubscribe.forEach(sb => sb.unsubscribe());
      }

    }       

这是我的HTML代码

        <table style="width: 100%;" >
        <thead>
            <tr>
                <th>Department Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Band</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>   
            <tr *ngFor="let item of rowData" >
                <td>{{item.DepartmentName}}</td>
                <td>{{item.FirstName}}</td>
                <td>{{item.LastName}}</td>
                <td>{{item.Band}}</td>
                <td>{{item.Salary}}</td>
            </tr >        
        </tbody>
    </table>

我遇到错误

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

您需要遍历rowData.department，它具有必需的属性，而不是rowData，

 <tr *ngFor="let item of rowData.department" >