Angular 对话框按钮不响应与布尔值的数据绑定

Question

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

我有一个带有 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 不会改变。

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

Answer 1

很可能是因为您将回调作为纯 JS 函数传递并试图访问其中的 class 成员变量。 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 而不是仅抓取特定组件。相反，您可以使用 Angular 模板引用变量和 RxJS fromEvent 来监听事件。

Answer 2

谢谢迈克尔，还有和我有同样问题的人，我建议你更换

[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
    );
  }

再次感谢！

Angular 对话框按钮不响应与布尔值的数据绑定

Angular Dialog Button doesn't respond to data binding with boolean

binding

boolean

dialog

angular