Angular2/4 ngForディレクティブは、変数の割り当て私は私のHTMLテンプレートで次の操作を行うために使用される私のAngularJSアプリで

Question

を許可していません。フィルタされた表の項目にアクセスできました。

角度2/4でこの割り当てができないので、角度2/4でどのようにすることができますか？

UPDATE：

コンポーネント：

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

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

Answer 2

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

。テンプレートは、コントローラの状態を表す画面上のピクセルを取得するために必要なものに制限する必要があります。何かを計算したり何かをフィルタリングする必要があるときは、コントローラでそれを行います。