Angular Dialog Button 不响应带有布尔值的数据绑定

如何解决Angular Dialog Button 不响应带有布尔值的数据绑定

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

我有一个带有 2 个对话框的 Angular 组件。我的打字稿中有一个绑定到 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 不会改变。

尽管我试图解决这个问题，但我做不到。我检查了钩子，甚至尝试将功能拆分为更多单独的组件，但没有解决我的问题。

解决方法

很可能是因为您将回调作为普通 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
  );
}

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

,

谢谢迈克尔，另外，对于和我有同样问题的人，我建议你更换

getServerSideProps

与

[attr.disabled]

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

 [disabled]

组件

<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>

再次感谢！