Question

我有以下问题。我将创建一个表，通过Laravel后端提供的JSON获取数据。该表是Angular Material Table。这到目前为止工作。现在我想过滤结果，过滤器也传递给对象。但是变化是不可见的。我做错了什么？

这是我的HTML代码

<div>
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>
<mat-table [dataSource]='dataSource?.data'>

  <ng-container matColumnDef="barcode">
    <mat-header-cell *matHeaderCellDef>Barcode</mat-header-cell>
    <mat-cell *matCellDef="let items">{{items.barcode}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let items">{{items.name}}</mat-cell>
  </ng-container>

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

</mat-table>

这是我的JSON

{
    "items": [
        {
            "id": 1,
            "barcode": "IN SH 000001",
            "name": "Gwen",
            "description": "Das ist ein Beschreibungstext",
            "type": null,
            "room": null,
            "status": null,
            "annotation": null,
            "image": null,
            "lend": null,
            "manufactor": null,
            "created_at": "2018-04-25 11:53:05",
            "updated_at": "2018-04-25 11:53:05"
        },
        {
            "id": 2,
            "barcode": "IN SH 000002",
            "name": "Deadpool",
            "description": "Das ist ein kein Beschreibungstext :P",
            "type": null,
            "room": null,
            "status": null,
            "annotation": null,
            "image": null,
            "lend": null,
            "manufactor": null,
            "created_at": "2018-04-27 10:35:57",
            "updated_at": "2018-04-27 10:35:57"
        },
        {
            "id": 3,
            "barcode": "IN SH 000003",
            "name": "Hoder",
            "description": "Hold the door",
            "type": null,
            "room": null,
            "status": null,
            "annotation": null,
            "image": null,
            "lend": null,
            "manufactor": null,
            "created_at": "2018-04-27 10:36:23",
            "updated_at": "2018-04-27 10:36:23"
        }
    ]
}

这是我的TS代码

export class TableComponent implements OnInit {

  constructor(public http: HttpClient) { }
  items: any;
  displayedColumns = ['barcode', 'name'];
  dataSource: any;
  ngOnInit() {
    this.items = this.getItems().subscribe((data) => {
      this.items = data;
      this.dataSource = new MatTableDataSource(this.items.items);
      console.log(this.dataSource.data);
    });


  }

  getItems() {
    return this.http.get('http://127.0.0.1:8000/api/items');

  }

    applyFilter(filterValue: string) {
      filterValue = filterValue.trim(); // Remove whitespace
      filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
      this.dataSource.filter = filterValue;
      console.log(this.dataSource);
    }
}

export interface Item {
  id: number;
  barcode: string;
  name: string;
  description?: string;
  type?: any;
  room?: any;
  status?: any;
  annotation?: any;
  image?: any;
  lend?: any;
  manufactor?: any;
  created_at: Date;
  updated_at: Date;
}

Answer 1

在mat-table

上应该只是 dataSource

<mat-table [dataSource]="dataSource">

角度5表过滤

1 个答案: