在 Angular 中顯示材料表

Question

我對Angular很陌生，我正在嘗試創建一個表格來更好地顯示我的數據。 我從我的服務器提供的 JSON 中獲取數據。

data.component.html內容：

<div class="container">
  <h1>Search history</h1>
  <table *ngIf="searches">
    <li *ngFor="let search of searches">
      <p class="searchParams">{{search.searchParams}}</p>
      <p class="searchDate">{{search.searchDate | date: "yyyy-MM-dd hh:mm"}}</p>
    </li>
  </table>
</div>

data.component.ts內容：

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.scss']
})
export class DataComponent implements OnInit {
  searches: Object;
  constructor(private _http: HttpService) {
  }

  ngOnInit() {
    this._http.getSearches().subscribe(data => {
      this.searches = data;
      console.log(this.searches);
    });
  }
}

我得到的是一個看起來像項目符號列表的東西：

我試圖把這個作為例子，但我不明白如何實現它。 我這里的數據源是什么？ 我應該寫什么 HTML 才能得到這么漂亮的表格？

Answer 1

如果您想要角材料表之類的東西，您應該實際使用它並遵循文檔。
如果您不想使用有角度的材料，而只想使用常規的 HTML 表格，您應該像這樣調整代碼以使用實際的表格行和列：

<div class="container">
  <h1>Search history</h1>
  <table *ngIf="searches">
    <tr *ngFor="let search of searches">
      <td class="searchParams">{{search.searchParams}}</p>
      <td class="searchDate">{{search.searchDate | date: "yyyy-MM-dd hh:mm"}}</p>
    </tr>
  </table>
</div>

然后，您可以通過 CSS 設置表格樣式。

對於角度材料方法，您應該首先安裝包並將其導入到您的模塊中。 然后你可以使用這樣的模板：

<table mat-table [dataSource]="searches" class="mat-elevation-z8">    
  <!-- searchParams Column -->
  <ng-container matColumnDef="searchParams">
    <th mat-header-cell *matHeaderCellDef> Search parameters </th>
    <td mat-cell *matCellDef="let element"> {{element.searchParams}} </td>
  </ng-container>

  <!-- searchDate Column -->
  <ng-container matColumnDef="searchDate">
    <th mat-header-cell *matHeaderCellDef> Date </th>
    <td mat-cell *matCellDef="let element"> {{element.searchDate}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

不要忘記在后面的代碼中定義 displayColumns：

displayedColumns: string[] = ['searchParams', 'searchDate'];

Answer 2

這樣的東西可以工作，

data.component.html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Keyword Column -->
  <ng-container matColumnDef="keyword">
    <th mat-header-cell *matHeaderCellDef> Keyword </th>
    <td mat-cell *matCellDef="let element"> {{element.keyword}} </td>
  </ng-container>

  <!-- Limit Column -->
  <ng-container matColumnDef="limit">
    <th mat-header-cell *matHeaderCellDef> Limit </th>
    <td mat-cell *matCellDef="let element"> {{element.limit}} </td>
  </ng-container>

  <!-- Date Search Column -->
  <ng-container matColumnDef="dateSearch">
    <th mat-header-cell *matHeaderCellDef> Date Search </th>
    <td mat-cell *matCellDef="let element"> {{element.dateSearch | date: "yyyy-MM-dd hh:mm"}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</tabl1e>

data.component.ts

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.scss']
})
export class DataComponent implements OnInit {
  searches: Object;
  displayedColumns: string[] = ['position', 'keyword', 'limit', 'date'];
  dataSource = ELEMENT_DATA;
  constructor(private _http: HttpService) {
  }

  ngOnInit() {
    this._http.getSearches().subscribe(data => {
      this.searches = data;
      this.dataSource = data.map((v, i) => {
        position: i,
        keyword: v.searchParams.keyword,
        limit: v.searchParams.limit,
        dateSearch: v.searchDate
      });
      console.log(this.searches);
    });
  }
}