Angular4 ngIf не обновляется

Шаблон не обнаруживает изменения в модели запаса, когда для переменной флажка установлено значение true. Я пытался использовать обнаружение изменений, но не уверен, правильно ли я реализую, поэтому я пока удалил его из своего примера кода. Как ни странно, у меня не было проблем до того, как я начал извлекать данные из удаленной службы.

Вот пример моего плункера: 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-контейнере я должен увидеть акции, которые я выбрал. Вместо этого я не вижу никаких изменений или обновлений...

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

angular asynchronous angular-ng-if
person mduve    schedule 24.12.2017    source источник
comment
У вас есть stocksObservable | async дважды. Таким образом, вы дважды подписываетесь на наблюдаемую, отправляете 2 HTTP-запроса и получаете два разных массива акций. Не используйте асинхронность, если вы действительно не понимаете, как она работает.   -  person JB Nizet    schedule 24.12.2017
comment
Я новичок в angular, и я впервые имею дело с наблюдаемыми, поэтому я все еще обдумываю это. Я просто пытаюсь просмотреть, какие акции были выбраны. Спасибо за вашу помощь   -  person mduve    schedule 25.12.2017
comment
отслеживать проверенный массив для каждого объекта, вместо этого отслеживая индекс, и добавлять/удалять элемент в список массивов проверенных объектов и проходить его в обычном режиме. На вашем примере заработало.   -  person Asura    schedule 25.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что вы неправильно используете наблюдаемые. Наблюдаемые используются для испускания объектов. Таким образом, когда ваш объект внутри наблюдаемого обновляется при нажатии флажка, это не тот же объект, который используется в следующем ngFor и, следовательно, не отражается как его модель подписки, вид двух подписок.

Я создал локальную переменную stocks, которая обновляется или назначается с помощью метода подписки.

Я изменил код 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;
        }


    }

Я предполагаю, что вы имеете дело с акциями, которые нуждаются в локальных обновлениях, а также в постоянных обновлениях по подписке. Итак, идеальным способом было бы использовать BehaviorSubject в RxJS. Хороший пример можно найти на https://coryrylan.com/blog/angular-observable-data-services

person Nikhil Doomra    schedule 25.12.2017
comment
Я посмотрю на BehaviorSubject. Но наверняка это приведет меня к тому, что мне нужно сейчас - спасибо за вашу помощь. - person mduve; 25.12.2017