为 JSON 中的多条记录引发错误答案

【问题标题】：Throwing an error for multiple records in JSON为 JSON 中的多条记录引发错误
【发布时间】：2020-05-27 12:29:00
【问题描述】：

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

这是我的第一个孩子 html

    <ng-container matColumnDef="organization">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> Organization Name </th>
     <td mat-cell *matCellDef="let element" (click)="showInfo(element)"> {{element.organizationName}}
     </td>
 </ng-container>

这是第一个孩子的 ts

showInfo(rowData) {
    let dialogConfig = new MatDialogConfig();
    dialogConfig = {
      width: '850px',
      data:rowData
    }
    const dialogRef = this.dialog.open(ModalPopupTrialTypeComponent, dialogConfig);
}

这是我的 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.Department" >
            <td>{{item.DepartmentName}}</td>
            <td>{{item.FirstName}}</td>
            <td>{{item.LastName}}</td>
            <td>{{item.Band}}</td>
            <td>{{item.Salary}}</td>
        </tr >        
    </tbody>
</table>

我收到以下错误：

找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

在 NGFor 中添加 .department 后，我没有收到错误，但它只显示一条记录而不是多条记录

【问题讨论】：

你试过*ngFor="let item of rowData.Department。看起来这就是您正在尝试做的事情
@JorgeMussato 是的，我已经尝试过了，我没有收到错误，但没有收到多个值
尝试在表格标签之外添加{{rowData | json}} 并在此处发布屏幕上显示的内容。因为您帖子中的JSON 可能是错误的

标签： angular angular8 ngfor

【解决方案1】：

你确定console.log中的数据在department数组中有多个数据吗？

【讨论】：

我指的是 ngOninit 中的 console.log。它是否显示了您所期望的正确数据
在 console.log 中只显示一条记录，但在 json 中我有 2 条记录
这意味着的 html 部分很好。在 showInfo 方法中记录 rowdata 值，我认为该元素只有一条记录，因此正在发生这种情况

【解决方案2】：

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

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

【讨论】：

我试过上面的 *ngFor="let item of rowData.department" 但我仍然只得到一个数据
我没有收到错误，但我没有收到错误，但我也没有收到值
你能帮我还是数据没有显示