角度表排序，不带角度材料

Question

我想在我的表中进行搜索，但是我想让表中首先填满我的数据。目前，只有当我开始在搜索栏中输入时，它才会被填满。

我认为问题来自于初始化组件时productsArray是空的

我的数据来自项目中的JSON文件。

下面你可以看到我目前所拥有的

export class TableComponent implements OnInit {
      searchText: any;
      productsArray: Products[] = [];
      filteredArray = [...this.productsArray];

      constructor(private http: HttpClient) {}

      ngOnInit(): void {
        this.getProducts().subscribe((res) => {
          this.productsArray = res;
        });
      }
      getProducts(): Observable < Products[] > {
        return this.http
          .get < any > ('assets/mock.data.json')
          .pipe(map((results) => results.data));
      }
      filterArray(): any {
        if (!this.productsArray.length) {
          this.filteredArray = [];
          return;
        }

        if (!this.searchText) {
          this.filteredArray = [...this.productsArray];
          return;
        }

        const products = [...this.productsArray];
        const properties = Object.keys(products[0]);

        this.filteredArray = products.filter((product) => {
          return properties.find((property) => {
              const valueString = product[property].toString().toLowerCase();
              return valueString.includes(this.searchText.toLowerCase());
            }) ?
            product :
            null;
        });
      }
    }

                        Code                       Name                       Category             

<tbody *ngFor="let product of filteredArray; let i = index">
  <tr>
    <td>{{ product.code }}</td>
    <td>{{ product.name }}</td>
    <td>{{ product.category }}</td>
  </tr>
</tbody>

Answer 1

初始化filteredArray时，它是空的。只有在调用filterArray()时，filteredArray才会填充一些值。因此在ngOnInit()中提供filteredArray的值。试试这个：

ngOnInit(): void {
    this.getProducts().subscribe((res) => {
      this.productsArray = res;
      this.filteredArray = [...this.productsArray];
    });
  }

Answer 2

你需要使用管道，就像这样

@Pipe({
    name: 'filterPipe'
})
export class FilterPiper implements PipeTransform {
    transform(array: any[], properties: any[], filter: string) {
        if (!array) {
            return [];
        }
        if (!properties.length || !filter) {
            return array;
        }

        filter = filter.trim().toLowerCase();
        return array.filter((element) => 
      !!(properties.find((property) => {
          const valueString = product[property].toString().toLowerCase();
          return valueString.includes(filter)
        )) 
    });
}

和在html中

 <tbody *ngFor="let product of productsArray | filterPipe: propertiesArray : searchText ; let i = index">
  <tr>
    <td>{{ product.code }}</td>
    <td>{{ product.name }}</td>
    <td>{{ product.category }}</td>
  </tr>
</tbody>

请记住，管道需要在模块中声明并导入到组件中