Angular 如何使用角度过滤表中的行？

所以我使用angular来显示数据库中存储的一些信息。 我只想在表中显示具有特定信息的行。例如，仅显示状态为“已接受”的行

       <div class="container" >
         <div class="row">

           <table class="table table-dark">
                <thead>
          <tr>
              <th>Boat type</th>
              <th>Service</th>
              <th>Boat Location</th>
              <th>Job type</th>
              <th>Status</th>
        </tr>
          </thead>   
          <tbody>
           <tr *ngFor="let boat of boats" >
           <td>{{ boat.boatType }}</td>
           <td>{{ boat.service }}</td>
           <td>{{ boat.location }}</td>
           <td>{{ boat.jobType }}</td>
           <td>{{ boat.status }}</td>


         </tr>


        </tbody>
      </table>
  </div>
</div>

船型
服务
船位
工作类型
地位
{{boat.boatType}
{{boat.service}
{{boat.location}
{{boat.jobType}
{{boat.status}

在

.ts

文件中，您可以执行以下操作：

this.boats = this.boats.filter((boat) => boat.status === 'Accepted')

---

这将删除

.ts

文件中不具有该状态的所有项目，您可以执行以下操作：

this.boats = this.boats.filter((boat) => boat.status === 'Accepted')

---

如果您不想更改

This.boots

数组，并且只是不在视图中显示某些行，则这将删除任何不具有该状态的项：

       <div class="container" >
         <div class="row">

           <table class="table table-dark">
                <thead>
          <tr>
              <th>Boat type</th>
              <th>Service</th>
              <th>Boat Location</th>
              <th>Job type</th>
              <th>Status</th>
        </tr>
          </thead>   
          <tbody>
           <tr *ngFor="let boat of boats" >
           <td *ngIf="boat.status === 'Accepted'">{{ boat.boatType }}</td>
           <td *ngIf="boat.status === 'Accepted'">{{ boat.service }}</td>
           <td *ngIf="boat.status === 'Accepted'">{{ boat.location }}</td>
           <td *ngIf="boat.status === 'Accepted'">{{ boat.jobType }}</td>
           <td *ngIf="boat.status === 'Accepted'">{{ boat.status }}</td>

         </tr>


        </tbody>
      </table>
  </div>
</div>

船型
服务
船位
工作类型
地位
{{boat.boatType}
{{boat.service}
{{boat.location}
{{boat.jobType}
{{boat.status}

如果您不想更改

此.boots

数组，只是不想在视图中显示某些行：

       <div class="container" >
         <div class="row">

           <table class="table table-dark">
                <thead>
          <tr>
              <th>Boat type</th>
              <th>Service</th>
              <th>Boat Location</th>
              <th>Job type</th>
              <th>Status</th>
        </tr>
          </thead>   
          <tbody>
           <tr *ngFor="let boat of boats" >
           <td *ngIf="boat.status === 'Accepted'">{{ boat.boatType }}</td>
           <td *ngIf="boat.status === 'Accepted'">{{ boat.service }}</td>
           <td *ngIf="boat.status === 'Accepted'">{{ boat.location }}</td>
           <td *ngIf="boat.status === 'Accepted'">{{ boat.jobType }}</td>
           <td *ngIf="boat.status === 'Accepted'">{{ boat.status }}</td>

         </tr>


        </tbody>
      </table>
  </div>
</div>

船型
服务
船位
工作类型
地位
{{boat.boatType}
{{boat.service}
{{boat.location}
{{boat.jobType}
{{boat.status}

在您的情况下，您可以使用

例如，您想在

ngfor

首先，像这样定义管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exampleFilter'})

export class ExamplePipe implements PipeTransform {
  transform(arr) {
    return arr.filter((boat) => boat.status === 'Accepted');
  }
}

import { ExamplePipe } from './examplePipe.pipe'; // import our pipe here

@NgModule({
  ...
  declarations: [ ... , ExamplePipe ], // include example pipe here
  ...
})

export class AppModule { }

<tr *ngFor="let boat of boats | exampleFilter" >
  <td>{{ boat.boatType }}</td>
  <td>{{ boat.service }}</td>
  <td>{{ boat.location }}</td>
  <td>{{ boat.jobType }}</td>
  <td>{{ boat.status }}</td>
</tr>

然后像下面这样将其导入到您的模块[example:AppModule.ts]

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exampleFilter'})

export class ExamplePipe implements PipeTransform {
  transform(arr) {
    return arr.filter((boat) => boat.status === 'Accepted');
  }
}

import { ExamplePipe } from './examplePipe.pipe'; // import our pipe here

@NgModule({
  ...
  declarations: [ ... , ExamplePipe ], // include example pipe here
  ...
})

export class AppModule { }

<tr *ngFor="let boat of boats | exampleFilter" >
  <td>{{ boat.boatType }}</td>
  <td>{{ boat.service }}</td>
  <td>{{ boat.location }}</td>
  <td>{{ boat.jobType }}</td>
  <td>{{ boat.status }}</td>
</tr>

那么你可以这样使用它

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exampleFilter'})

export class ExamplePipe implements PipeTransform {
  transform(arr) {
    return arr.filter((boat) => boat.status === 'Accepted');
  }
}

import { ExamplePipe } from './examplePipe.pipe'; // import our pipe here

@NgModule({
  ...
  declarations: [ ... , ExamplePipe ], // include example pipe here
  ...
})

export class AppModule { }

<tr *ngFor="let boat of boats | exampleFilter" >
  <td>{{ boat.boatType }}</td>
  <td>{{ boat.service }}</td>
  <td>{{ boat.location }}</td>
  <td>{{ boat.jobType }}</td>
  <td>{{ boat.status }}</td>
</tr>

{{boat.boatType}
{{boat.service}
{{boat.location}
{{boat.jobType}
{{boat.status}

在您的情况下，您可以使用

例如，您想在

ngfor

首先，像这样定义管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exampleFilter'})

export class ExamplePipe implements PipeTransform {
  transform(arr) {
    return arr.filter((boat) => boat.status === 'Accepted');
  }
}

import { ExamplePipe } from './examplePipe.pipe'; // import our pipe here

@NgModule({
  ...
  declarations: [ ... , ExamplePipe ], // include example pipe here
  ...
})

export class AppModule { }

<tr *ngFor="let boat of boats | exampleFilter" >
  <td>{{ boat.boatType }}</td>
  <td>{{ boat.service }}</td>
  <td>{{ boat.location }}</td>
  <td>{{ boat.jobType }}</td>
  <td>{{ boat.status }}</td>
</tr>

然后像下面这样将其导入到您的模块[example:AppModule.ts]

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exampleFilter'})

export class ExamplePipe implements PipeTransform {
  transform(arr) {
    return arr.filter((boat) => boat.status === 'Accepted');
  }
}

import { ExamplePipe } from './examplePipe.pipe'; // import our pipe here

@NgModule({
  ...
  declarations: [ ... , ExamplePipe ], // include example pipe here
  ...
})

export class AppModule { }

<tr *ngFor="let boat of boats | exampleFilter" >
  <td>{{ boat.boatType }}</td>
  <td>{{ boat.service }}</td>
  <td>{{ boat.location }}</td>
  <td>{{ boat.jobType }}</td>
  <td>{{ boat.status }}</td>
</tr>

那么你可以这样使用它

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exampleFilter'})

export class ExamplePipe implements PipeTransform {
  transform(arr) {
    return arr.filter((boat) => boat.status === 'Accepted');
  }
}

import { ExamplePipe } from './examplePipe.pipe'; // import our pipe here

@NgModule({
  ...
  declarations: [ ... , ExamplePipe ], // include example pipe here
  ...
})

export class AppModule { }

<tr *ngFor="let boat of boats | exampleFilter" >
  <td>{{ boat.boatType }}</td>
  <td>{{ boat.service }}</td>
  <td>{{ boat.location }}</td>
  <td>{{ boat.jobType }}</td>
  <td>{{ boat.status }}</td>
</tr>

{{boat.boatType}
{{boat.service}
{{boat.location}
{{boat.jobType}
{{boat.status}

您可以通过为

ngFor

循环使用

ng容器

，并通过对

tr

元素应用

ngIf

条件来过滤模板中的行。请注意，

ng容器

本身不会在HTML输出中呈现

<tbody>
  <ng-container *ngFor="let boat of boats" >
    <tr *ngIf="boat.status === 'Accepted'">
      <td>{{ boat.boatType }}</td>
      <td>{{ boat.service }}</td>
      <td>{{ boat.location }}</td>
      <td>{{ boat.jobType }}</td>
      <td>{{ boat.status }}</td>
    </tr>
  </ng-container>
</tbody>

{{boat.boatType}
{{boat.service}
{boat.location}
{{boat.jobType}
{{boat.status}

---

请参阅以获取演示。

您可以通过为

ngFor

循环使用

ng容器

，并对

tr

元素应用

ngIf

条件来过滤模板中的行。请注意，

ng容器

本身不会在HTML输出中呈现

<tbody>
  <ng-container *ngFor="let boat of boats" >
    <tr *ngIf="boat.status === 'Accepted'">
      <td>{{ boat.boatType }}</td>
      <td>{{ boat.service }}</td>
      <td>{{ boat.location }}</td>
      <td>{{ boat.jobType }}</td>
      <td>{{ boat.status }}</td>
    </tr>
  </ng-container>
</tbody>

{{boat.boatType}
{{boat.service}
{{boat.location}
{{boat.jobType}
{{boat.status}

---

有关演示，请参阅。

a

div

不是

表中的有效标记，因此它在技术上不是有效的htmlIndeed，修复了冗长的答案，但功能正常。非常感谢。一个
div
在
表中不是有效的标记，因此它在技术上不是有效的htmlIndeed，修复了冗长的答案，但功能正常。非常感谢。输入很好，是不是应该从“…”导入{ExamplePipe}
？你说得对，我改了，谢谢@用管道学习SyrimaSess过滤器阵列是一个不好的做法，为什么没有过滤器管的角度？我不认为这是一个坏的做法，角管可以做更多的不仅仅是过滤或排序。好的输入，不应该是代码>进口{ExpLyPype }从'……/代码>？你说得对，我已经改变了，谢谢。用管道学习SyrimaSess过滤器阵列是一个不好的做法，为什么没有过滤器管的角度？我不认为这是一个坏的做法，角管可以做更多的不仅仅是过滤或排序。