PrimeNG + Angular 4：组件中设置的切换按钮未在屏幕上更新

Question

我是一名初学者，正在开发使用 JHipster 构建的应用程序并使用 Angular 4.3。我也在使用 PrimeNG。

我正在尝试使用 <p-toggleButton>（这里是 documentation），但我的问题是我在 component.ts 中更新了我的值，但是 [=58= 】没关系。

用例是在某些情况下，用户无法将按钮设置为 ON 或 OFF。所以我必须检查条件并根据结果分配切换按钮。

我的代码如下所示：

HTML

   <p-toggleButton [(ngModel)]="checked"
                   [value]="checked" // Tried [(ngValue)], (ngValue) too but doesn't work
                   (ngModelChange)="lockChanged()"
                   onLabel="ON" offLabel="OFF"
                   [style]="{'width':'150px'}">
   </p-toggleButton>

TS

export class Component implements OnInit {
    checked: boolean;
    lockScreen: Lock;
    lockItem: LockItem = [...];

    constructor(
        private lockService: LockService
    ) { }

    ngOnInit() {
        this.findLock();
    }

    lockChanged() {
        this.lockService.find(this.lockItem).subscribe((res) =>  this.lockScreen = res);
        if (this.checked) {
            if (this.lockScreen.lockItem === undefined) {
                let lock = new Lock();
                this.lockService.create(lock).subscribe((res) => console.log(res));
                this.checked = true;
            } else {
                // TODO error Message

            }
        } else {
            if (this.lockScreen.lockItem !== undefined) { 
                this.checked = true;
                console.log(this.checked); // is true
            }
        }
    }

    private findLock() {
        this.lockService.find(this.lockItem).subscribe((res) => {
            res.lockItem ? (this.checked = true, this.lockScreen = res) : (this.checked = false, this.lockScreen = res);
        });
    }
}

但即使我将选中的值设置为true或false，html代码也没有关系。我在 html 中尝试了 [(ngValue)]、(ngValue) 和 [value]... 有人有想法吗？

编辑：评论的答案+解决方案

@Arash : 我已经试过了（更改），我在 TS 中的函数没有被调用。我别无选择，只能使用 (ngModelChange)

@Skorunka František：如果我设置禁用属性，我将无法使用我的切换按钮，因为它处于禁用状态。所以我不能用这个。

@Shah：是的，它没有属性值，我只是尝试过使用其他组件时的解决方案。

@Bharat Gupta：你部分解决了我的问题，谢谢！

这是有效的代码：

HTML

   <p-toggleButton [(ngModel)]="locked"
                   (onChange)="lockChanged()"
                   onLabel="ON"
                   offLabel="OFF"
                   [style]="{'width':'150px'}">
   </p-toggleButton>

TS

                this._ngZone.run(() => {
                    setTimeout(()=>{
                        this.locked = false;
                    },0);
                });

Answer 1

引用@Gunter 来自:

Angular runs the code of your components within its zone where most async APIs (addEventListener, setTimeout, ...) are patched so the zone can notify Angular when such an async callback has happend. This is when Angular runs change detection.

If you initialized AssetService outside Angular or AssetService by other means executes code outside Angulars zone, then Angular doesn't get notified about happened async callbacks and doesn't run change detection.

因此您可能需要在 zone.run() 内执行更改。首先将 NgZone 注入到您的组件中。然后 lockChanged 需要像下面这样改变：

lockChanged() {
    this.lockService.find(this.lockItem).subscribe((res) =>  this.lockScreen = res);
    if (this.checked) {
        if (this.lockScreen.lockItem === undefined) {
            let lock = new Lock();
            this.lockService.create(lock).subscribe((res) => console.log(res));
            this.zone.run(() => { this.checked = true });
        } else {
            // TODO error Message
        }
    } else {
        if (this.lockScreen.lockItem !== undefined) { 
            this.zone.run(() => { 
              this.checked = true;
              console.log(this.checked); 
            });
        }
    }
}

需要对 findLock 函数进行类似的更改。

PrimeNG + Angular 4：组件中设置的切换按钮未在屏幕上更新

PrimeNG + Angular 4 : toggle button set in component isn't updated on the screen

togglebutton

typescript

primeng

angular