需要在NgFor上解析复杂的数组

Question

我有这个数据结构：

我需要访问数组内部每个对象的错别字，实际上我在离子2上具有这种结构：

  <ion-item-group *ngFor="let data of contraCheque">
      <ion-item-divider color="light">{{ data[0].competencia }}</ion-item-divider> <!-- imprime o dado correto -->
      <ion-item (click)="consultarCheque(data)">{{ data }}</ion-item> <!-- imprime todos os objetos de cada array -->
      <ion-item (click)="consultarCheque(data)">{{ data[0].tipo }}</ion-item> <!-- imprime apenas a primeira prop de cada array -->
  </ion-item-group>

如果我使用索引来尝试打印每种类型的每个道具，它什么也不会打印（请参见下图）而且我认为逻辑是错误的：

 <ion-item-group *ngFor="let data of contraCheque; index as i">
      <ion-item-divider color="light">{{ data[0].competencia }}</ion-item-divider>
      <ion-item (click)="consultarCheque(data)">{{ data[i].tipo }}</ion-item> 
  </ion-item-group>

我需要在*ngFor内部执行以下过程吗？如果没有，请帮助我。

  const dadosContraCheque = [[{"tipo":"Complementar","id_folha":"24015","competencia":"03\/2017"}],[{"tipo":"Mensal","id_folha":"23855","competencia":"02\/2017"},{"tipo":"Sodexo","id_folha":"24075","competencia":"02\/2017"}],[{"tipo":"Mensal","id_folha":"23376","competencia":"01\/2017"},{"tipo":"Sodexo","id_folha":"23755","competencia":"01\/2017"}],[{"tipo":"13\u00ba Salari","id_folha":"22415","competencia":"12\/2016"},{"tipo":"Complementar","id_folha":"22535","competencia":"12\/2016"},{"tipo":"Mensal","id_folha":"22655","competencia":"12\/2016"},{"tipo":"Complemento","id_folha":"22675","competencia":"12\/2016"},{"tipo":"Sodexo","id_folha":"23015","competencia":"12\/2016"}],[{"tipo":"1\u00aa Parcela do 13\u00ba Salar","id_folha":"21798","competencia":"11\/2016"},{"tipo":"Mensal","id_folha":"21975","competencia":"11\/2016"},{"tipo":"Sodexo","id_folha":"22555","competencia":"11\/2016"}],[{"tipo":"Mensal","id_folha":"21295","competencia":"10\/2016"},{"tipo":"Sodexo","id_folha":"21755","competencia":"10\/2016"}],[{"tipo":"Mensal","id_folha":"21054","competencia":"09\/2016"},{"tipo":"Sodexo","id_folha":"21375","competencia":"09\/2016"}]]
  const tipo = dadosContraCheque.map(array => array.map(objeto => objeto.tipo) )
  console.log(tipo)

Answer 1

您在数组内有数组，因此应按以下方式使用

  <ion-item-group *ngFor="let data of contraCheque[0]">
      <ion-item-divider color="light">{{ data[0].competencia }}</ion-item-divider> <!-- imprime o dado correto -->
      <ion-item (click)="consultarCheque(data)">{{ data |json }}</ion-item> <!-- will print array as json--> 
      <ion-item (click)="consultarCheque(data)">{{ data.tipo }}</ion-item> <!-- imprime apenas a primeira prop de cada array -->
  </ion-item-group>

Answer 2

此方法有效：

  <ion-item-group *ngFor="let data of contraCheque">
      <ion-item-divider color="light">{{ data[0].competencia }}</ion-item-divider>
      <span *ngFor="let d of data" >
        <ion-item (click)="consultarCheque(data)">{{ d.tipo }}</ion-item>
      </span>
  </ion-item-group>