как получить доступ к JSON в JSON в массиве с помощью NGfor

Question

Я использую Angular 6 и Firebase.Я хотел бы отобразить список всех встреч.Вот как я поступаю.

service.ts

getRDV() {
  this.rdvList = this.firebase.list('/rdv');
  return this.rdvList;
}

Модель:

export class RDV {
  key: string;
  date: string;
  heure: string;
  spe: string;
  uidpat: string;
  uid: string;
  status: string;
}

В тс:

export class ListComponent implements OnInit {

  rdvList: RDV[];

  constructor(
    private usersService: UsersService,
    private router: Router
  ) {}

  ngOnInit() {
    var x = this.usersService.getRDV();
    x.snapshotChanges().subscribe(item => {
      this.rdvList = [];
      item.forEach(element => {
        var y = element.payload.toJSON();
        y["$key"] = element.key;
        this.rdvList.push(y as RDV);
      })
      console.log(this.rdvList)
    })
  }

}

В HTML:

<tr *ngFor="let rdv of rdvList| myfilter:term, let i = index">
  <div *ngFor="let item of rdvList.rdv.key">
    <td> {{item.$key}} </td>
    <td> {{item.uidpat}} </td>
    <td> {{item.date}} </td>
    <td> {{item.heure}} </td>
    <td> {{item.spe}} </td>
    <td> {{item.uid}} </td>
    <td> 
      <button class="btn btn-primary" (click)="onViewUser(user?.uid)">
        Choisir
      </button> 
    </td>
  </div>
</tr>

СТРУКТУРА ДАННЫХ:

Я действительно не могу решить проблему, если мне нужно изменить способ их выдачи в таблицу или использовать шаблон*ngfor для устранения проблемы.

my JSON console.log

Answer 1

Очевидно, что вы хотите здесь просто список объектов назначений, которые вложены под клавиши DATE.

Если вы хотите извлечь все эти объекты назначений, вам нужно отобразить их так:

export class ListComponent implements OnInit {

  ...

  ngOnInit() {
    var x = this.usersService.getRDV();
    x.snapshotChanges().subscribe(item => {
      const appointments = [];
      item.forEach(element => {
        var y = element.payload.toJSON();
        y["$key"] = element.key;
        appointments.push(y);
      });

      // This is the operation
      this.rdvList = appointments
        .flatMap(item => Object.values(item))
        .filter(item => typeof item === "object");

      console.log(this.rdvList)
    })
  }

}

Первый flatMap извлечет все значения из каждого объекта в вашем массиве.Он будет содержать ваши объекты встреч, а также строку даты.

Таким образом, вам придется применить filter ко всем элементам, отображенным в первой операции flatMap, чтобы отфильтровать только те элементы, которые имеютвведите Object

Это должно дать вам ваши объекты назначений в rdvList свойстве, которое вы затем можете просмотреть в своем шаблоне, используя *ngFor