Angular4 ngIf가 업데이트되지 않습니다

Question

확인란이 checkbox 변수가 true로 설정된 경우 템플릿이 주식 모델의 변경 사항을 감지하지 못합니다. 변경 감지 기능을 사용했지만 제대로 구현했다면 확실하지 않으므로 코드 예제에서 제거했습니다. 이상하게도 원격 서비스에서 데이터를 가져 오기 전에 문제가 없었습니다. http://plnkr.co/edit/0EfkaSpk3Ag9p5NH5jJ2?p=preview

여기 내 컨트롤입니다 : 내 NG-용기 내

<tr *ngFor="let stock of stocksObservable | async;"> 
     <td> 
     <input [checked]="stock.isChecked" (change)="stock.isChecked = !stock.isChecked;onSelectStock($event);" type="checkbox"> <a href="">{{ stock.number }}</a> {{stock.isChecked}} 
     </td> 
    </tr> 

, 내가 선택한 주식을 볼 수

은 여기 내 plunker의 예입니다. 난 당신이 잘못된 방법으로 관찰 가능한을 사용하는 생각

//services 
branchesObservable : Observable<object> ; 
stocksObservable : Observable<object> ; 

isChecked: boolean; 
selectable: boolean; 

constructor(private stocksService: StocksService) { 
    this.branchesObservable = this.stocksService.get_branches(); 
} 

//fetch stock data into table 
getBranchStocks(value){ 
    this.stocksObservable = this.stocksService.get_stocks(value); 

} 

//select stocks 
onSelectStock(event) { 
    this.isChecked = !this.isChecked; 
} 

Answer 1

대신, 나는

<table> 
    <tr> 
    <th>Is Checked</th> 
    </tr> 
    <ng-container *ngFor="let stock of stocksObservable | async;"> 
    <tr *ngIf="stock.isChecked"> 
     <td> 
     <a href="">{{stock.number}}</a> {{stock.isChecked}} 
     </td> 
    </tr> 
    </ng-container> 
</table> 

다음은 내 수업의 ... 변경 또는 업데이트를 볼 수 없습니다. Observables는 객체를 내보내는 데 사용됩니다. 따라서 observable 내에서 객체가 업데이트 될 때 checkbox를 클릭하면 다음 ngFor에서 사용되는 동일한 객체가 아니므로 구독 모델로 반영되지 않습니다. 두 가지 구독 유형입니다.

구독 방식을 통해 업데이트되거나 할당 된 로컬 변수 주식을 만들었습니다.

나는 plnkr 코드 : http://plnkr.co/edit/7WBNDX53pCbf44QnlRo4?p=preview을 수정했습니다.

// import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; 
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 

import { StocksService } from './stocks.service'; 
import { Observable } from 'rxjs/Observable'; 



@Component({ 
    selector: 'app-root', 
    template: ` 
    <div class="wrapper"> 
     <select #branch (change)="getBranchStocks(branch.value)"> 
     <option value="null">select a branch</option> 
     <option *ngFor="let branch of branchesObservable | async" value="{{ branch.branchId }}">{{ branch.name }}</option> 
     </select> 
     <table style="width:100%;"> 
     <tr> 
      <th>Stock</th> 
     </tr> 
     <tr *ngFor="let stock of stocks"> 
      <td> 
      <input [checked]="stock.isChecked" (change)="stock.isChecked = !stock.isChecked;onSelectStock($event);" type="checkbox"> <a href="">{{ stock.number }}</a> {{stock.isChecked}} 
      </td> 
     </tr> 
     </table> 
     <table style="width:49%;float:left;border:0;"> 
     <tr> 
      <th>Is Checked</th> 
     </tr> 
     <ng-container *ngFor="let stock of stocks"> 
      <tr *ngIf="stock.isChecked"> 
      <td> 
       <a href="">{{stock.number}}</a> {{stock.isChecked}} 
      </td> 
      </tr> 
     </ng-container> 
     </table> 
    </div> 
    `, 
}) 

export class AppComponent { 

    //services 
    branchesObservable : Observable<object> ; 
    stocksObservable : Observable<object> ; 
    stocks:object; 

    isChecked: boolean; 
    selectable: boolean; 

    constructor(private stocksService: StocksService) { 
     this.branchesObservable = this.stocksService.get_branches(); 
    } 

    //fetch stock data into table 
    getBranchStocks(value){ 
     this.stocksObservable = this.stocksService.get_stocks(value); 
     this.stocksObservable.subscribe(data=>this.stocks=data); 
    } 

    //select stocks 
    onSelectStock(event) { 
     this.isChecked = !this.isChecked; 
    } 


} 

로컬 업데이트뿐만 아니라 가입의 지속적인 업데이트가 필요한 주식을 처리하고있는 것으로 보입니다. 따라서 이상적인 방법은 RxJS에서 BehaviorSubject를 사용하는 것입니다. 좋은 예가 https://coryrylan.com/blog/angular-observable-data-services