为什么 ng-if 不能在 mat-dialog 中工作

Question

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

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

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

在 typescript 文件中调用 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 中不起作用？

Answer 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

Answer 2

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

Answer 3

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

declarations: [..., MyDialogComponent]

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

为什么 ng-if 不能在 mat-dialog 中工作

Why do ng-if don't work inside a mat-dialog

angularjs

angular-ng-if

angular-material

angularjs-ng-if