仅在对象更改时启用垫子按钮

Question

我有一个 mat-toggle-button，我希望仅当 ts class 中的对象发生更改时才可点击，否则它应该保持灰色

<mat-button-toggle (click)="updateChanges()" appearance="fill">Update changes</mat-button-toggle>

我想为此使用 SimpleChanges API，因为它会跟踪已注册对象的状态变化（非常适合我的情况）。

@Input() myObject: MyObject;
public updateButtonClickable: boolean = false;
 ngOnChanges(changes: SimpleChanges) {
        if (changes.myObject) {
            this.updateButtonClickable = true;
        } else {
            this.updateButtonClickable = false;
        }
    }

第一个问题是这种方法会检测页面加载时的变化，因此当页面加载时我的布尔标志变量将设置为 true，这很烦人，因为我不会将此定义为状态变化。
现在我的第二个问题是将按钮状态绑定到这个变量值，我一直在查看 material 页面，但我不知道如何实现这个，知道吗？

Answer 1

如果我们有 previousValue，我们可以进行比较。如果 previousValue 与 currentValue 不同，那么它一定是一个新对象。如果 updateButtonClickable 布尔值是 false.

，我们使用 [disabled] 来“变灰”并使按钮不可点击

@Component({
  selector: 'hello',
  template: `<p>Complex: {{ complex | json }}</p><br>
  <button [disabled]="!updateButtonClickable">I am button</button>
  <br>
  <br>`,
})
export class HelloComponent implements OnChanges {
  @Input() myObject: any;
  public updateButtonClickable: boolean = false;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.myObject) {
      console.log(changes);
      if (
        changes.myObject.previousValue != undefined &&
        changes.myObject.previousValue != changes.myObject.currentValue
      ) {
        console.log('yes now enable');
        this.updateButtonClickable = true;
      } else {
        this.updateButtonClickable = false;
      }
    }
  }
}

这是一个工作示例：https://stackblitz.com/edit/angular-ng-on-changes-example-v44p6v?file=src%2Fapp%2Fhello.component.ts

仅在对象更改时启用垫子按钮

Enable mat button only on object change

angular-material

angular