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

Question

我有以下代码：

这是 HTML 视图：

<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>

这是打字稿文件 (.ts):

  condition_var:string;
   filterIt(value){
     this.condition_var=value;
  }

注意： array 变量已经填充。（对象数组： [{}])

我的问题是：在 angular2 中总是声明变量并在表达式、ngIf、ngFor 等中使用它们是否是一种做法。或者我可以使用更好的方法而不是填充我的 class许多看起来不太好的变量。

更具体地说，有没有更好的方法来编写这段代码？

Answer 1

在您的例子中，您正在根据 "male" 字符串过滤数据。

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

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

不需要make函数，会在if block,

处理

Answer 2

我会这样解决：

//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>

这样更简洁，让逻辑在 your.ts 文件中发生，而您的网页仅显示。

Answer 3

是的，有更好（更惯用）的方法来做到这一点：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。请注意，过滤器可以接受多个位置参数，以冒号分隔。

请记住将管道添加到您使用管道的任何 @NgModules:

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

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

如果有问题的 @NgModule 是延迟加载的 "shared" 模块，不要忘记重新导出它：

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

此答案目前有效截至 angular 4.3.6。

Answer 4

我会在你的组件 class 中使用 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 5

如果您想避免在 class 中声明变量，这里有一个方法。只需在单击按钮时初始化变量：

<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>

您不必以这种方式在 class 中声明 condition、condition_var 或 filterIt() 方法。 Link 到 Plunker Demo。

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

Do I always have to declare a variable in angular2 to get changes?

javascript

angular

ecmascript-6

angular-pipe