Question

我的视图没有显示本地属性，绑定模型属性的更新后的属性值，也未显示来自observable的值。从控制台记录显示所有值均已更新。

这是一个多步骤表单，除了此烦人的问题外，它的工作原理非常好：

我第一次单击展位时，按预期触发了clickBooth（e），并且视图会用该值更新。

我单击另一个展位以“添加”它，所有相同的代码均被触发，但视图未反映出selectedboothlabels或newbookingform.booths的新更新值

在表单上继续操作（使用触发“ changeStep”方法的继续按钮），然后返回到表单的此特定部分，selectedboothlabels和newbookingform.booths的正确值是显示在视图中。

尝试了很多事情。我想我现在圈子里跑了。这是许多版本的代码中的最新版本：

服务：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs';    

@Injectable()
export class SelectedBoothService {

  public boothlist = new Subject<string[]>();

  setBoothList(value: string[]) {
    this.boothlist.next(value); 
  }
  getBoothList(): Observable<any> {
    return this.boothlist.asObservable();
  }
}

与View相关（非常非常简化）：

{{selectedboothlabels}}<br>
{{newbookingform.booths}}

注意：我尝试将newbookingform.booths（在表单上的BookingForm ngModel的一部分）绑定到简单的文本输入。但是，该值不会通过输入进行更新，因此不要相信这会做任何事情。

组件中的相关代码：

import { SelectedBoothService } from '../../services/selectedbooths.service';
import { Subscription } from 'rxjs/Subscription';
import { BookingForm } from '../../models/booking.interface';

@Component({
    selector: 'reserve-booth',
    templateUrl: './reserve-booth.component.html'
})
export class ReserveBoothComponent implements OnInit {
    selectedboothlabels: string[] = [];
    boothlistsubscription: Subscription;
    newbookingform: BookingForm = new BookingForm();

    constructor(
        private _changedetector: ChangeDetectorRef,
        private _selectedboothService: SelectedBoothService) {

            this.boothlistsubscription = 
              this._selectedboothService.getBoothList().subscribe(list => {
                     console.log("Subscribing to the boothlist: " + list); //shows most recent values perfectly
                     this.selectedboothlabels = list;
                     this._changedetector.markForCheck(); //no affect...
             });
    }

     //fired from an custom component. Works great. 
     clickBooth(e) {
          let boothindex = -1;
          let targetid = e.currentTarget.id;
           //check our list of selectedbooths.
           if (this.selectedboothlabels != undefined) {
               boothindex = this.selectedboothlabels.indexOf(targetid);                  
           }
           if (boothindex == -1) {
              //add to our list
              this.selectedboothlabels.push(targetid);
              boothindex = this.selectedboothlabels.indexOf(targetid);                               
              this.newbookingform.booths = this.selectedboothlabels;
              this._selectedboothService.setBoothList(this.selectedboothlabels); 
           } else {
             //already here. Remove it.
             this.selectedboothlabels.splice(boothindex, 1);                
             this.newbookingform.booths = this.selectedboothlabels;                
             this._selectedboothService.setBoothList(this.selectedboothlabels);

             boothindex = this.selectedboothlabels.indexOf(targetid);                 
          }

          this._changedetector.detectChanges(); //seems to have no affect 
       }
     }

初始更改后Angular 5视图不显示更新的属性值

0 个答案: