Угловой вид не обновляется после обнаружения изменений - PullRequest
Новая
       3

Угловой вид не обновляется после обнаружения изменений

1 голос
/ 16 апреля 2019

У меня есть выпадающий список, я хотел бы отключить его динамически, я использую @Input, чтобы получить значение из родительского компонента и отключить его в дочернем компоненте.

Значение @input возвращается правильно и срабатывает на ngOnchange, я утешил значение @input, и оно возвращается, как и ожидалось.

Однако, когда я печатаю значение в HTML, значение не обновляется с помощью onChange. (Значение изменяется в компоненте, шаблон не обновляется)

Я пробовал this.ref.detectChanges () и ngZone, но он не работает

HTML 

<div ngbDropdown #commonDropdown="ngbDropdown" class="d-inline-block" style="width: 100%;" [autoClose]="true">
      <button class="btn btn-primary truncate" id="dropdownBasic1" ngbDropdownToggle [disabled]="disableChannel">
        {{values.selected.value}}
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1" style="width: 100%;">
        <button *ngFor="let value of values.data" class="dropdown-item" (click)="selectDropDown(value); commonDropdown.close();">{{value.value}}
        </button>
      </div>
</div>

компонент: 

export class CommonComponent implements OnInit, OnChanges {
      @Input()
      disableChannel: boolean;
      @Input()
      values: DropDownObject;
      @Output()
      valueSelected: EventEmitter < any > = new EventEmitter();
      private selectedValues: DropDownObject;

      constructor(private ref: ChangeDetectorRef, private ngZone: NgZone) {

      }

      ngOnInit() {
        this.emitSelectedValue(this.values);
      }

      ngOnChanges(simpleChanges: SimpleChanges) {
        console.log(this.disableChannel);
        // boolean returns as expected however, binding in the view doesn't work. Button is not disabled when the value returns true
      }


      selectDropDown(selectedChannel): void {
        this.values.setSelected(selectedChannel);
        this.selectedValues = new DropDownObject();
        this.selectedValues.setSelected(selectedChannel);
        this.selectedValues.setData(this.values.getData());
        this.emitSelectedValue(this.selectedValues);
      }

      emitSelectedValue(data) {
        this.valueSelected.emit(data);
      }

}
...