Почему ng-if не работает в мат-диалоге - PullRequest
Новая
       24

Почему ng-if не работает в мат-диалоге

0 голосов
/ 09 июля 2020

Я создал компонент mat-dialog для запуска HTTP-ответа. Когда я включаю оператор ngIf в html для mat-dialog, он не обрабатывается. На консоли отображается следующее предупреждение.

Невозможно выполнить привязку к 'ngIf', поскольку это неизвестное свойство 'div'.

NgIf отлично работает во всех других компонентах проекта.

Вызов мат-диалога внутри файла машинописного текста. 

 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 -если не работает в мат-диалоге?

1 Ответ

0 голосов
/ 14 июля 2020

Я отправляю это сообщение в надежде, что оно кому-нибудь пригодится. Это не точный ответ на эту проблему, но это то, как я преодолеваю свой сценарий. В моем случае я использовал компонент 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
}

Затем я определил вновь созданный компонент mat-dialog внутри объявления модуля angular. 

@NgModule({
  declarations: 
[
UserAccountInfoReloadPopupDialogComponent
],

Это устранило мою проблему. Вы можете проверить документацию angular mat-dialog. https://material.angular.io/components/dialog/overview

...