Javascript 我是否总是必须在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>

注意：数组变量已填充。（对象数组：

[{}]

）

我的问题是：在angular2中，总是声明变量并在表达式、ngIf、ngFor等中使用它们是一种实践吗？还是我可以使用更好的方法，而不是用太多看起来不好的变量填充我的类

---

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

在您的例子中，您是根据“男性”字符串过滤数据的

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

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

---

不需要生成函数，如果块，它将在中处理，

我将用以下方法解决它：

//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代码
filterIt（参数：字符串）{
//在此处使用您的参数筛选this.array
}
//您的COMPONENT.HTML代码
过滤男性
{{i+1}}
{{item.condition}}

这会更干净，让我们在您的.ts文件中执行逻辑，而您的网页只显示。

是的，有一种更好（更惯用）的方法可以做到这一点：

通过以下方式实施：

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

如果所讨论的

@NgModule

是延迟加载的“共享”模块，请不要忘记重新导出它：

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

---

这个答案目前在angular

4.3.6

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

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

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

在模板中，只需使用FilterDarray：

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

---

如果希望避免在类中声明变量，可以使用以下方法。只需单击按钮初始化变量：

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

过滤男性性别
{{i+1}}
{{item.condition}}

---

您不必以这种方式在类中声明

condition

、

condition\u var

或

filterIt（）

方法。链接到。

查看管道，而不是循环整个阵列预先筛选它。不清楚您在问什么。我已经查看了管道，准备制作一个自定义管道。。。你真的用按钮过滤吗？@msanford这样做有问题吗？我只是在试验..是的，您可以在html中使用声明的ts文件变量。是的，当然使用它更好。我的荣幸。我们在自己的应用中广泛使用过滤管。它们功能非常强大，无需重复自定义过滤代码，我同意你的观点，这会使@Components变得混乱。转换的第一个参数是否总是我们必须传递的数组？@masterach否，

PipeTransform

的第一个参数是你想要执行的任何值。在您的例子中，它将是一个数组（因为您想要过滤它），但是

PipeTransform

是通用的（我编写了一个管道来创建复数，它只是一个字符串）。函数定义的其余部分由您决定。Angular（在

pipe_transform.d.ts

中）中定义的接口签名是

transform（值：any，…args:any[]）：any
public myArray: any[] = [];
public myCondition: string | null = null;

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

<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);
  }
}

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