後端API完成了以後，可以來串接後端來的資料囉

以下提幾點的蠻實用的開發設計

讀取 (Data Table)

這邊使用到了Angular Material的Data Table來接資料會用到排序(sort)、分頁(pagination)、過濾(filter)

programs.service.ts

public getBackendData(
  ): Observable<any> {
    const getURL = environment.TriBackendAPI + '/Triathlon/GetAllTri';
    return this.http.get<Triathlon>(getURL);
  }

trievent.component.ts

export class TrieventComponent implements OnInit {
  // 定義分頁
  @ViewChild(MatPaginator) paginator: MatPaginator;
  // 定義排序
  @ViewChild(MatSort) sortTable: MatSort;
  //定義Data Table需要的物件來源
  public tridataTable = new MatTableDataSource<Triathlon>(); 
  //資料總數
  public totalCount = 0; 
  //前端Table需要展現的欄位
  displayedColumns: string[] = ['EDIT_BUTTON', 'DELETE_BUTTON', 'Detail', 'date', 'year', 'month', 'day', 'place', 'name', 'organizer', 'location', 'applydate', 'status']; 
  constructor(
    private programService: ProgramsService,
  ) { }

  ngOnInit() {
    this.getTriData();
  }
  getTriData() {
    this.programService.getBackendData()
      .subscribe(
        (response: any) => {
          this.tridataTable.data = response.data;
          this.tridataTable.paginator = this.paginator;
          this.tridataTable.sort = this.sortTable;
          this.totalCount = response.data.length;
        }
        , (error: HttpErrorResponse) => this.programService.HandleError(error)
      );
  }

trievent.component.html

  <div>
    <mat-paginator #paginator [length]="totalCount" [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 15]">
    </mat-paginator>
        <ng-container matColumnDef="year">
          <th mat-header-cell *matHeaderCellDef>year</th>
          <td mat-cell *matCellDef="let row">{{ row.year }}</td>
        </ng-container>
        <ng-container matColumnDef="month">
          <th mat-header-cell *matHeaderCellDef>month</th>
          <td mat-cell *matCellDef="let row">{{ row.month }}</td>
        </ng-container>
      .............
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

編輯/修改/確認/刪除 (Button)

這邊特別用到了Angular的特性，利用ngIf的true or false來做一個具有互動式的修改頁面

• 利用[dataSource]="tridataTable"的每列row綁定一個Triathlon型別中沒定義的屬性isDisabled
• 一開始為false，藉由ngIf的特性達編輯/修改/確認互動的感覺
• 再加上一個刪除按鈕，修改與刪除的前端頁面就完成了

        <ng-container matColumnDef="EDIT_BUTTON">
          <th mat-header-cell *matHeaderCellDef>編輯</th>
          <td mat-cell *matCellDef="let row">
            <button *ngIf=!row.isDisabled mat-mini-fab color="primary"   
            (click)="row.isDisabled=true">
                <span matTooltip="Edit">
                <mat-icon>edit</mat-icon>
              </span>//編輯開關
            </button>
            <button *ngIf=row.isDisabled mat-mini-fab color="warn" 
            (click)="row.isDisabled=false">
                  <span matTooltip="Cancel">
                <mat-icon>clear</mat-icon>
              </span>//取消
            </button>
            <button *ngIf=row.isDisabled mat-mini-fab color="primary    
             (click)="updateTriData(row);row.isDisabled=false">
              <span matTooltip="Confirm">
               <span matTooltip="Confirm">
                <mat-icon>send</mat-icon>
              </span>//修改確認
              </span>
            </button>
          </td>
        </ng-container>
        <ng-container matColumnDef="DELETE_BUTTON">
          <th mat-header-cell *matHeaderCellDef>刪除</th>
          <td mat-cell *matCellDef="let row">
            <button mat-mini-fab color="warn" (click)="deleteTriData(row.id)">
            <mat-icon>delete</mat-icon>//刪除
            </button>
          </td>
        </ng-container>

主頁上的欄位也是用ngIf與ngModel綁定修改值來實現修改功能

 <ng-container matColumnDef="name">
   <td mat-cell *matCellDef="let row">
      <div *ngIf="row.isDisabled">
         <mat-form-field>
            <input matInput [(ngModel)]="row.name">
         </mat-form-field>
       </div>
       <div *ngIf="!row.isDisabled">
              {{ row.name }}
       </div>
   </td>
  </ng-container>

細節 (Dialog)

利用Dialog可以傳資料的特性，這邊將接回來的比較屬於Deatil的競賽組別資料

• 主頁面Table新增一個DetailButton，按下後

<button mat-mini-fab color="accent" (click)="openDetailDialog(row.tri_event)"></button>

• 將Detail資料丟到Detail的component中(TrieventDetailComponent)

##### trievent.component.ts
// 打開detail視窗
  public openDetailDialog(Data: any): void {
    const dialogRef = this.dialog.open(TrieventDetailComponent, {
      width: '1500px',
      data: { pData: Data }
      disableClose: false
    });
  }

接收從主頁來的資料並呈現

trievent-detail.component.ts

 public eventData: Array<EVENT> = new Array<EVENT>(); //來接主頁來的自定義物件
  constructor(
    public dialogRef: MatDialogRef<TrieventDetailComponent>, // 定義dialog
    @Inject(MAT_DIALOG_DATA) public data: any, // 接收從主頁面來的資料
  ) { }
  ngOnInit() {
    this.eventData = this.data.pData; //將主頁來的資料給定eventData
  }

trievent-detail.component.html

  <div class="row col-md-12 col-lg-12">
  <mat-card *ngFor="let results of eventData">
    <mat-card-content>
      <label>組別:</label>
      <h3>{{results.eventgroup}}</h3>
    </mat-card-content>
    <mat-card-content>
      <label>組別名稱</label>
      <h3>{{results.name}}</h3>
    </mat-card-content>
    <mat-card-content>
      <label>比賽日期:</label>
      <h3>{{results.startDate}}</h3>
    </mat-card-content>
  </mat-card>
  ......
</div>