Angular2計算過濾列表

Question

我有一個連接客戶的社交連接數組。我在我的應用程序中顯示邀請連接，現有連接和非邀請/非註冊連接中的3個不同部分。

我正在嘗試使用計算的屬性使我的生活更輕鬆。

組件段

export class SocialComponent implements OnInit { 
    public loaded = false; 
    public connections:Connection[] = []; 

    constructor(public socialService:SocialService) { 
    } 

    loadConnections() { 
     var self = this; 
     return new Promise(function (resolve, reject) { 
      self.socialService 
       .connections() 
       .subscribe(connections => { 
        self.connections = connections; 
        resolve(connections); 
       }, error => reject(error)); 
     }); 
    } 

    public get registeredConnections():Connection[] { 
     return this.connections.filter(connection => { 
      return connection.exists; 
     }); 
    } 

    ngOnInit() { 
     var promises = []; 

     promises.push(this.loadConnections()); 
     //..... 
     //other promises here 
     //..... 

     Promise.all(promises).then(values => this.loaded = true); 
    } 
} 

模板

<div class="well"> 
    <h4>People you know that are coming</h4> 
    {{ registeredConnections | json }} 
    <div class="col-md-3" *ngFor="#connection of registeredConnections"> 
     <connection [connection]="connection"></connection> 
    </div> 
</div> 

當我使用它自己的{{ registeredConnections | json }}這一切工作正常。

第二個我嘗試ngFor，ngIf我收到以下錯誤

EXCEPTION: Expression 'registeredConnections in SocialComponent@5:34' has changed after it was checked. Previous value: ''. Current value: '' in [registeredConnections in SocialComponent@5:34] 

Answer 1

顯然，在開發者模式，角度會檢查你的綁定兩次，以確保他們不會改變。

https://github.com/angular/angular/issues/6006

嘗試從自動計算特性改變registeredConnections到正規的財產。然後調用一個函數來填充所述陣列：

export class SocialComponent implements OnInit { 
    public loaded = false; 
    public connections:Connection[] = []; 
    public registeredConnections: Connection[]; 
    loadConnections() { 
     var self = this; 
     return new Promise(function (resolve, reject) { 
      self.socialService 
       .connections() 
       .subscribe(connections => { 
        self.connections = connections; 
        self.registeredConnections = connections.filter(connection => { return connection.exists; }); 

        resolve(connections); 
       }, error => reject(error)); 
     }); 
    }