Angular2/4 ngFor 指令不允许变量赋值

Question

在我的 AngularJS 应用程序中，我曾经在我的 HTML 模板中执行以下操作：

<tr ng-repeat="user in filtered = (users | filter:searchTerm | orderBy:firstName)">

然后我可以在我的控制器中使用变量“filtered”，这样我就可以访问我过滤的表格行项目。

Angular 2/4 不允许此分配，那么我如何在 Angular 2/4 中执行此操作？

更新：

组件：

export class UsersComponent implements OnInit {
  users = [];
  totalItems = 0;
  filteredUsers = [];
  filteredUser: User;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getUsers()
    .subscribe(
      (data: any) => {
        this.users = data.data;
      },
      msg => console.error(`Error: ${msg.status} ${msg.statusText}`)
    );
  }

  trackItems(index, item){
    this.totalItems = index+1;
    this.filteredUsers.push(item); // <- This does not work? Should be able to push the item to my filteredUsers array?
    return item ? item.id : undefined;
  }
}

模板：

<tr *ngFor="let user of users | filterBy: ['firstName', 'lastName', 'email']: searchTerm; trackBy: trackItems">

错误信息：

UsersComponent.html:49 ERROR TypeError: Cannot read property 'push' of undefined
    at DefaultIterableDiffer.webpackJsonp.../../../../../src/app/pages/users/users.component.ts.UsersComponent.trackItems [as _trackByFn] (users.component.ts:108)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.check (core.es5.js:6857)
    at DefaultIterableDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultIterableDiffer.diff (core.es5.js:6830)
    at NgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngDoCheck (common.es5.js:1669)
    at checkAndUpdateDirectiveInline (core.es5.js:10837)
    at checkAndUpdateNodeInline (core.es5.js:12330)
    at checkAndUpdateNode (core.es5.js:12269)
    at debugCheckAndUpdateNode (core.es5.js:13130)
    at debugCheckDirectivesFn (core.es5.js:13071)
    at Object.View_UsersComponent_0._co [as updateDirectives] (UsersComponent.html:58)

UsersComponent.html:49 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 97, nodeDef: Object, elDef: Object, elView: Object}

Answer 1

您可以将as 与*ngIf 一起使用：

<ng-container *ngIf="users | filterBy:[...] as filteredUsers">
  <tr *ngFor="let user of filteredUsers">

但这会创建一个“变量”filteredUsers，它是模板本地的，与“控制器”无关。 （还要注意Angular team recommends against filter and sort pipes。）

您不能在模板表达式的上下文中设置控制器属性，例如在*ngFor 或*ngIf 中使用的。您可以在事件处理程序中设置它，但情况不同：

<my-component (onToggle)="prop = !prop">

一般来说，最好还是避免在模板中放入过多的逻辑。模板应将自身限制为在屏幕上显示表示控制器状态的像素所需的内容。当您需要计算某些内容或过滤某些内容时，请在控制器中执行此操作。

Answer 2

<tr *ngFor="let hero of heroes; let first = first; let last = last" >
//OR
<tr *ngFor="let hero of heroes; let even = even; let odd = odd" >

 //OR
 <tr *ngFor="let hero of heroes; trackBy: trackHero" >

我们可以使用 trackBy 提供我们自己的机制来跟踪列表中的项目。我们需要向 trackBy 传递一个函数，该函数接受几个参数，即索引和当前项：

@Component({
    selector:'heroes',
    template: `
    <table>
        <thead>
            <th>Name</th>
        </thead>
        <tbody>
            <tr *ngFor="let hero of heroes; trackBy: trackHero" >
                <td>{{hero.name}}</td>
            </tr>
        </tbody>
    </table>
`
})
export class Heroes {

    heroes = HEROES;

    trackHero(index, hero) {
        console.log(hero);
        return hero ? hero.id : undefined;

    }


}

http://blog.angular-university.io/angular-2-ngfor/