Выдает ошибку для нескольких записей в JSON - PullRequest
Новая
       37

Выдает ошибку для нескольких записей в JSON

0 голосов
/ 12 февраля 2020

В моем 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 поддерживает только привязку к итерируемым объектам, таким как массивы.

После добавления .department в NGFor Я не получаю сообщение об ошибке, но отображается только одна запись, а не несколько записей

Ответы [ 2 ]

0 голосов
/ 12 февраля 2020

Вы уверены, что данные в console.log содержат несколько данных в массиве отдела.

0 голосов
/ 12 февраля 2020

Вам нужно перебрать rowData.department, который имеет необходимые атрибуты, а не rowData, 

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