Angular 8 - 比較對象 (JSON) 內部的 arrays 的更好方法是什么？

Question

我正在使用 Angular 8 開發一個網站（第一次），我需要一些幫助。我在service.ts從我的 API 收到兩個 JSON：

  getCurso(): Observable<Curso[]>{
    return this.http.get<Curso[]>(this.cursos)
  }
  getCursoConductor(): Observable<CursoConductor[]> {
    return this.http.get<CursoConductor[]>(this.cursoConductores)
  }

來自getCursoConductor()的 JSON ：

{
"dato": [
  {
"id_curso_conductor": 1,
"f_inicio": "2019-09-19T05:00:00.000+0000",
"f_fin": "2019-12-20T05:00:00.000+0000",
"estado": "1",
"carnet_c": "l584f",
"f_caducidad": "2022-06-20T05:00:00.000+0000",
"f_emision": "2017-06-20T05:00:00.000+0000",
"id_curso": 1,
"id_persona": 3
},
  {
"id_curso_conductor": 2,
"f_inicio": "2019-08-20T05:00:00.000+0000",
"f_fin": "2019-12-20T05:00:00.000+0000",
"estado": "1",
"carnet_c": "8574h",
"f_caducidad": "2023-04-05T05:00:00.000+0000",
"f_emision": "2017-04-08T05:00:00.000+0000",
"id_curso": 1,
"id_persona": 5
},
  {
"id_curso_conductor": 3,
"f_inicio": "2019-10-09T05:00:00.000+0000",
"f_fin": "2019-12-10T05:00:00.000+0000",
"estado": "1",
"carnet_c": "2685f",
"f_caducidad": "2022-08-10T05:00:00.000+0000",
"f_emision": "2017-08-09T05:00:00.000+0000",
"id_curso": 1,
"id_persona": 6
}
],
}

還有一個來自getCurso()

{
"cur": [
  {
"id_curso": 1,
"nombre_curso": "Curso Vial 2019I",
"tiempo_vigencia": "2019-10-31T05:00:00.000+0000",
"estado": "1"
},
  {
"id_curso": 2,
"nombre_curso": "Curso Vial 2019II",
"tiempo_vigencia": "2019-12-15T05:00:00.000+0000",
"estado": "1"
}
],
}

正如您注意到的那樣，兩者都在"id_curso"內部，而我正在做的是使用來自getCurso()的數字或 arrays 創建 html 表，並用getCursoConductor() () 填充這些表：

     <div class="container" *ngFor="let curso of listCursos">
        <h1>Curso "{{curso.nombre_curso}}"</h1>
        <table class="table table-bordered"> 
          <thead>
            <tr>
              <th>Fecha Inicio</th>
              <th>Fecha Fin</th>
              <th>Estado</th>
              <th>Codigo de Carnet</th>
              <th colspan="2">Opcion</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let cursoConductor of listCursoConductor">
              <td>{{cursoConductor.f_inicio}}</td>
              <td>{{cursoConductor.f_fin}}</td>
              <td>{{cursoConductor.estado}}</td>
              <td>{{cursoConductor.carnet_c}}</td>
              <td><button class="btn btn-warning fa fa-pencil" (click)="fillSelect()" (click)="loadRequisito(cursoConductor)" data-toggle="modal" data-target="#editreqmodal" ></button></td>
              <td><button class="btn btn-danger fa fa-trash" (click)="Eliminar(cursoConductor)"></button></td>
            </tr>
          </tbody>
        </table>
      </div>

但它在兩個表中重復 cursoConductor 數據。 我想要的是僅顯示其光標的 cursoConductor 數據，例如if curso.id_curso=cursoConductor.id_curso

如果需要，這是 component.ts 的代碼：

curso: Curso = new Curso();
  cursoConductor: CursoConductor = new CursoConductor();
  listCursos: Curso[] = [];
  listCursoConductor: CursoConductor[] = [];
  constructor(private service: ServiceService, private router: Router) { }

  ngOnInit() {
    this.sortbyCurso();
  }
  sortbyCurso() {
    this.service.getCurso().subscribe((data) => {
      this.listCursos = data['cur']
    })
    this.getCursoConductor()
  }
  getCursoConductor() {
    this.service.getCursoConductor().subscribe((data) => {
      this.listCursoConductor = data['dato']
    })
  }

這就是我得到的 https://imgur.com/a/1fmuYBm

Answer 1

對我來說，您可以這樣做，而不是單獨擁有 2 個 collections ：

// your typescript component :
sortbyCurso() {
    this.service.getCurso().subscribe((data) => {
      this.listCursos = data['cur']

      // ensure to call the getCursoConductor() when you retrieved the data
      this.getCursoConductor()
    })

}

getCursoFromId(idCurso: any) {
    return this.listCursos.find(item => item && item.id_curso === idCurso);
}

getCursoConductor() {
    this.service.getCursoConductor().subscribe((data) => {
      // we are filtering data received for only existing "id_curso" from listCursos.
      const listCursoConductor = data['dato'].filter(element => !!this.getCurso(element.id_curso);

      // then we update the actual listCursos by adding a new property "listCursoConductor" which
      // will contain all the associated data.
      const updatedListCursos = this.listCursos.map(curso => {
        return {...curso, listCursoConductor: listCursoConductor.filter(item => item.id_curso === curso.id_curso)};
      });

      this.listCursos = updatedListCursos;
    })
}

然后在您的模板 html 中：

<div class="container" *ngFor="let curso of listCursos">
    <h1>Curso "{{curso.nombre_curso}}"</h1>
    <table class="table table-bordered"> 
      <thead>
        <tr>
          <th>Fecha Inicio</th>
          <th>Fecha Fin</th>
          <th>Estado</th>
          <th>Codigo de Carnet</th>
          <th colspan="2">Opcion</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngIf="!curso?.listCursoConductor">
            <td colspan="6">No data available.</td>
        </tr>
        <tr *ngFor="let cursoConductor of curso?.listCursoConductor">
          <td>{{cursoConductor.f_inicio}}</td>
          <td>{{cursoConductor.f_fin}}</td>
          <td>{{cursoConductor.estado}}</td>
          <td>{{cursoConductor.carnet_c}}</td>
          <td><button class="btn btn-warning fa fa-pencil" (click)="fillSelect()" (click)="loadRequisito(cursoConductor)" data-toggle="modal" data-target="#editreqmodal" ></button></td>
          <td><button class="btn btn-danger fa fa-trash" (click)="Eliminar(cursoConductor)"></button></td>
        </tr>
      </tbody>
    </table>
  </div>

希望它會有所幫助。