Question

当checkbox变量设置为true时，模板未检测到库存模型的更改。我尝试过使用更改检测，但不确定我是否正确实现，所以我暂时从代码示例中删除了。奇怪的是，在我开始从远程服务中提取数据之前，我没有遇到任何问题。

这是我的plunker示例： http://plnkr.co/edit/0EfkaSpk3Ag9p5NH5jJ2?p=preview

这是我的控制：

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

在我的ng-container中，我应该看到我选择的股票。相反，我看不到任何变化或更新......

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

这是我的班级：

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

我认为你以错误的方式使用了observable。 Observable用于发射对象。因此，当单击复选框时更新observable中的对象时，它与下一个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

上找到一个很好的例子

Angular4 ngIf未更新

1 个答案: