我是否总是必须在 angular2 中声明一个变量才能获得更改?
Do I always have to declare a variable in angular2 to get changes?
我有以下代码:
这是 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许多看起来不太好的变量。
更具体地说,有没有更好的方法来编写这段代码?
在您的例子中,您正在根据 "male" 字符串过滤数据。
因此您可以直接使用以下代码段:
*ngIf="item.condition=='male'"
不需要make函数,会在if block,
处理
我会这样解决:
//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 文件中发生,而您的网页仅显示。
是的,有更好(更惯用)的方法来做到这一点: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
s:
import { FilterPipe } from 'pipes/fitler.pipe.ts';
@NgModule({
declaractions: [
FilterPipe
],
// ...
})
如果 有问题的 @NgModule
是延迟加载的 "shared" 模块,不要忘记重新导出它:
@NgModule({
declaractions: [
FilterPipe
],
exports: [
FilterPipe
],
// ...
})
此答案目前有效截至 angular 4.3.6
。
我会在你的组件 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);
}
}
如果您想避免在 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。
我有以下代码:
这是 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许多看起来不太好的变量。
更具体地说,有没有更好的方法来编写这段代码?
在您的例子中,您正在根据 "male" 字符串过滤数据。
因此您可以直接使用以下代码段:
*ngIf="item.condition=='male'"
不需要make函数,会在if block,
处理我会这样解决:
//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 文件中发生,而您的网页仅显示。
是的,有更好(更惯用)的方法来做到这一点: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
s:
import { FilterPipe } from 'pipes/fitler.pipe.ts';
@NgModule({
declaractions: [
FilterPipe
],
// ...
})
如果 有问题的 @NgModule
是延迟加载的 "shared" 模块,不要忘记重新导出它:
@NgModule({
declaractions: [
FilterPipe
],
exports: [
FilterPipe
],
// ...
})
此答案目前有效截至 angular 4.3.6
。
我会在你的组件 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);
}
}
如果您想避免在 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。