javascript - 按钮禁用且 ngIf 在相同条件下工作

Question

我创建了一个 Material 对话框，并在 *ngIf 和按钮 [disabled] 属性内调用相同的方法两次。

我的 Material 对话框:

<div mat-dialog-content>
 <p>Insert package name:</p>
  <mat-form-field>
   <mat-label class="font-weight-bold">Package name</mat-label>
   <input matInput #newPackageName>
  </mat-form-field>
</div>
<ng-container *ngIf="existPackageName(newPackageName.value)">
 <p class="alert alert-danger" role="alert">Exist package with same name!!!</p>
</ng-container>
<div mat-dialog-actions>
 <button mat-button class="btn btn-secondary" [mat-dialog-close]="newPackageName.value" cdkFocusInitial [disabled]="existPackageName(newPackageName.value)">Create
 </button>
 <button mat-button class="btn btn-secondary" (click)="onNoClick()">Cancel</button>
</div>

我的 typescript :

    @Component({
      selector: 'new-package-dialog',
      templateUrl: './new-package/new-package-dialog.component.html',
      styleUrls: ['app.component.css']
    })
    export class NewPackageDialog {

      constructor(
        public dialogRef: MatDialogRef,
        @Inject(MAT_DIALOG_DATA) public data: DialogData) {
      }

      onNoClick(): void {
        this.dialogRef.close();
      }

      existPackageName(newPackageName: string) {
        return newPackageName.length > 0 && this.data.packages.some(package => package.name === newPackageName);
      }
    }

    export interface DialogData {
      packages: IPackage[];
    }

问题:有没有办法调用一次方法 existPackageName(newPackageName.value) 并将结果传递给按​​钮 [disabled] 属性？

Answer 1

您可以在组件中包含:

this.shouldDisable = this.existPackageName(this.newPackageName)

然后简单地:

<input matInput [(ngModel)]="newPackageName">
... 
<ng-container *ngIf="shouldDisable">
...
<button [disabled]="shouldDisable" ..rest of the properties>