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

这是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; 
    }

注：数组变量已被填充。（数组对象： [{}]）

我的问题是：它是在angular2实践始终声明变量和表达式，ngIf，ngFor等与他们合作，或者，我可以用一个更好的办法，而不是我的填充有太多变数的班级看起来不太好。

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

来源

2017-08-28 masterach

看看管道，而不是循环思考整个数组过滤它事先。 – Akxe

目前还不清楚你在问什么 –

我已经看过管道，我要做一个自定义的...将完成后发布我的答案 – masterach

是的，有更好的（更习惯的）方法来做到这一点：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是懒加载“共享”模块，别忘了再-export它：

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

这个答案是当前有效的角度4.3.6的。

来源

2017-08-28 13:10:30 msanford

我的荣幸。我们在自己的应用中广泛使用过滤管。它们非常强大，并且不需要重复自定义过滤代码，我同意你的看法，使@Components混乱。 – msanford

tnx为额外的信息..只要我达到15就会投票... – masterach

是变换的第一个参数总是一个数组，我们必须通过？ – masterach

就你而言，你是基于“男性”字符串筛选数据。

这样你就可以直接使用下面的代码片段：

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

不需要进行函数，它会在处理，如果块，

来源

2017-08-28 12:31:58

这不是我要求的... – masterach

是的，你可以在你的html中使用你声明的ts文件变量。是的课程是更好的使用。 –

我会解决这个问题是这样的：

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

这是很多CLE aner，让你的网页只显示你的.ts文件中的逻辑。

来源

2017-08-28 12:57:58 sander

我会在你的组件类中使用一个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); 
    } 
}

来源

2017-08-28 13:10:37 cyrix

这里有一个方法，如果你想避免在你的类中声明变量。只是初始化按钮点击变量：

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

来源

2017-08-28 13:43:54 Faisal

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

回答

相关问题