Angular Dialog Button 不响应布尔值的数据绑定答案

【问题标题】：Angular Dialog Button doesn't respond to data binding with booleanAngular Dialog Button 不响应布尔值的数据绑定
【发布时间】：2021-06-22 08:53:32
【问题描述】：

所以，我的问题很简单，但我无法解决它，也没有在互联网上找到任何帮助。

我有一个带有 2 个对话框的 Angular 组件。我的 typescript 中有一个绑定到 bool 的按钮，您可以在此处看到：

export class ModalDB {
  constructor(public dialog: MatDialog) { }
  enabledState: boolean = true;

  changeStates(){
    // let content = document.getElementById('db-pdf-body-scroll')
    // if (content.scrollTop+5 >= (content.scrollHeight - content.offsetHeight)) {
    //        console.log(this.enabledState)
    // } 
    this.enabledState = false; 
    console.log(this.enabledState)
  }

  toggleButton(){
    this.enabledState = false;
  }

  ngOnInit():void{
    console.log(this.enabledState)

    document.getElementById("db-pdf-body-scroll").addEventListener(
      'scroll',
      function(event){
        if (this.scrollTop+5 >= (this.scrollHeight - this.offsetHeight)) {
          ModalDB.prototype.changeStates();          
        } 
      },
      true // Capture event
  );
  }
  
 

  closeModalDB(){
    console.log("User didnt agree db")

    this.dialog.closeAll();
  }

  agreeDB(){
    console.log("User agreed db")
    this.dialog.closeAll();
  }
}

这里我有这个的 HTML：

<div mat-dialog-actions align="end">
    <button id="acceptDB" mat-raised-button color="primary" [attr.disabled]="enabledState" (click)="agreeDB()">Sunt de acord</button>
    <button mat-raised-button color="warn" (click)="closeModalDB()">Nu sunt de acord</button>
</div>

当我尝试记录变量 enabledState 时，它会发生变化。所以我的功能有效。但由于某种原因，DOM 不会改变。

尽管我试图解决这个问题，但我无法解决。我检查了钩子，甚至尝试将函数拆分为更多单独的组件，但没有解决我的问题。

【问题讨论】：

标签： angular binding dialog boolean

【解决方案1】：

很可能是因为您将回调作为纯 JS 函数传递并尝试访问其中的类成员变量。 this 的范围仅限于回调块内。相反，您可以将回调定义为箭头函数。

ngOnInit():void{
  console.log(this.enabledState)
  document.getElementById("db-pdf-body-scroll").addEventListener(
    'scroll',
    (event) => {              // <-- arrow function
      if (this.scrollTop+5 >= (this.scrollHeight - this.offsetHeight)) {
        this.changeStates();  // <-- call `this.changeState()` here
      } 
    },
    true // Capture event
  );
}

此外，使用document 访问元素在 Angular 中是不优雅的，因为它会爬取整个 DOM 而不仅仅是特定组件。相反，您可以使用带有 RxJS fromEvent 的 Angular 模板引用变量来监听事件。

【讨论】：

【解决方案2】：

谢谢Michael，也感谢遇到和我一样问题的人，我建议你更换

[attr.disabled]

与

 [disabled]

最后的代码应该是这样的： HTML：

<div mat-dialog-actions align="end">
    <button id="acceptDB" mat-raised-button color="primary" [disabled]="enabledState" (click)="agreeDB()">Sunt de acord</button>
    <button mat-raised-button color="warn" (click)="closeModalDB()">Nu sunt de acord</button>
</div>

组件

  ngOnInit():void{

    let content = document.getElementById('db-pdf-body-scroll')
    console.log(this.enabledState)
    document.getElementById("db-pdf-body-scroll").addEventListener(
      'scroll',
      (event) => {              // <-- arrow function
        if (content.scrollTop+5 >= (content.scrollHeight - content.offsetHeight)) {
          this.changeStates();  // <-- call `this.changeState()` here
        } 
      },
      true // Capture event
    );
  }

再次感谢！

【讨论】：