1

我创建了一个 mat-dialog 组件来触发 http 响应。当我在 mat-dialog 的 html 中包含 ngIf 语句时，它不会被处理。在控制台上，它显示如下警告。

无法绑定到“ngIf”，因为它不是“div”的已知属性。

NgIf 在项目中的所有其他组件中都可以正常工作。

在打字稿文件中调用 mat-dialog。

 this.matDialog.open(PaymentModelComponent, {
              width: "630px",
              data: { message: response.comment },
              autoFocus: false,
              height: "630px",
            });

html代码

<div *ngIf="true"><p>Show this only if "show" is true</p></div>

为什么 ng-if 在 mat-dialog 中不起作用？

4

3 回答 3

3

我需要做的就是将 DialogComponent 添加到模块的声明中：

declarations: [..., MyDialogComponent]

无需将组件代码放在同一个文件中。

于 2021-01-24T06:04:45.440 回答
1

我发布这个希望有人会发现它有用。这不是这个问题的确切答案，但这就是我克服我的情况的方法。就我而言，我使用 mat-dialog 组件作为 app.module.ts 中的入口组件

 entryComponents: [ErrorComponent, UserAccountInfoReloadPopupDialogComponent],

出于某种原因，ng-if 它在对话框中不起作用。它不仅适用于 ng-if，所有其他类似 ng-for 的东西都不可用。

我通过在同一个 ts 文件中定义两个组件来解决这个问题。

@Component({
  selector: "app-account-info",
  templateUrl: "./account-info.component.html",
  styleUrls: ["./account-info.component.css"],
})
export class AccountInfoComponent implements OnInit {
//code
}

@Component({
  selector: "user-account-info-reload-popup-dialog",
  templateUrl: "./payment-modal.component.html",
  styleUrls: ["./payment-modal.component.css"],
})
export class UserAccountInfoReloadPopupDialogComponent implements OnInit {
//code
}

然后我在 Angular 模块声明中定义了新创建的 mat-dialog 组件。

@NgModule({
  declarations: 
[
UserAccountInfoReloadPopupDialogComponent
],

这解决了我的问题。您可以查看 angular mat-dialog 文档。 https://material.angular.io/components/dialog/overview

于 2020-07-14T16:37:48.193 回答
1

您需要做的就是将对话框添加到您的模块导入和声明中。在声明对话框的组件的同一模块中。

于 2020-12-17T21:28:18.793 回答