Question

我有以下代码：

这是HTML视图：

+themeColor

这是打字稿文件（.ts）：

<button type="button" (click)="filterIt('male')">Filter male gender</button>
     <table>
       <ng-container *ngFor="let item of array;let i=index">
       <tr class="border-bottom" *ngIf="item.condition==condition_var">
         <td>{{i+1}}</td>
         <td>{{item.condition}}</td>
       </tr>
     </ng-container>
</table>

注意： 数组变量已填充。（对象数组： condition_var:string; filterIt(value){ this.condition_var=value; }）

我的问题是：在angular2中总是声明变量并在表达式，ngIf，ngFor等中使用它们是一种练习吗？或者我可以使用更好的方法而不是用太多的变量来填充我的类，而不是＃39看起来不错。

更具体地说，是否有更好的方法来编写此代码？

Answer 1

是的，有更好的（更惯用的）方法：use a @Pipe。

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

@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  transform(values: any, condition: any): any {
    return values.filter(item => item.condition === condition);
  }
}

实施：

<ng-container *ngFor="let item of array | filter:condition">

然后根据您的喜好设置condition。请注意，过滤器可以接受多个位置参数，以冒号分隔。

请记住将管道添加到您使用管道的@NgModule中：

import { FilterPipe } from 'pipes/fitler.pipe.ts';

@NgModule({
  declaractions: [
    FilterPipe
  ],
  // ...
})

如果，有问题的@NgModule是一个延迟加载的＆＃34;共享＆＃34;模块，不要忘记重新导出它：

@NgModule({
      declaractions: [
        FilterPipe
      ],
      exports: [
        FilterPipe
      ],
      // ...
    })

此答案目前在有角度4.3.6时有效。

Answer 2

我会在你的组件类中使用一个getter来过滤你要循环的数组。像这样：

public myArray: any[] = [];
public myCondition: string | null = null;

public get myFilteredArray() {
  return this.myArray.filter(item => item.condition === this.myCondition);
}

在您的模板中，只需使用filteredArray：

<table>
  <tr class="border-bottom" *ngFor="let item of myFilteredArray;let i=index">
    <td>{{i+1}}</td>
    <td>{{item.condition}}</td>
  </tr>
</table>

或者你可以为它构建一个管道：

@Pipe({ name: 'myFilterPipe' })
export class MyFilterPipe implements PipeTransform {
  transform(value: any[], condition: string | null): any[] {
    if(!Array.isArray(value)) return [];
    return value.filter(item => item.condition === condition);
  }
}

Answer 3

在您的情况下，您正在根据“男性”字符串过滤数据。

因此，您可以直接使用以下代码段：

*ngIf="item.condition=='male'"

不需要创建功能，它将在 if block ，

中处理

Answer 4

我会这样解决：

//YOUR COMPONENT .TS CODE
filterIt(parameter: String){
//filter this.array here using your parameter
}

//YOUR COMPONENT .HTML CODE
<button type="button" (click)="filterIt('male')">Filter male gender</button>
 <table>
   <ng-container *ngFor="let item of array;">
   <tr class="border-bottom">
     <td>{{i+1}}</td>
     <td>{{item.condition}}</td>
   </tr>
 </ng-container>

这更加清晰，让您的网页只显示在.ts文件中的逻辑。

Answer 5

如果您想避免在类中声明变量，这是一种方法。只需在按钮点击时初始化变量：

<button type="button" (click)="condition = 'male'">Filter male gender</button>
<table>
    <ng-container *ngFor="let item of array;let i=index">
        <tr class="border-bottom" *ngIf="item.condition == condition">
            <td>{{i+1}}</td>
            <td>{{item.condition}}</td>
        </tr>
    </ng-container>
</table>

您不必以这种方式在班级中声明condition，condition_var或filterIt()方法。链接到Plunker Demo。

我是否总是必须在angular2中声明变量才能获得更改？

5 个答案: