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

Я создал компонент 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-if не работает внутри диалога mat?


angularjs angular-material angular-ng-if angularjs-ng-if
person sadisha nadiej    schedule 09.07.2020    source источник
comment
Отвечает ли это на ваш вопрос? Не удается выполнить привязку к 'ngIf' поскольку это неизвестное свойство div   -  person Dane Brouwer    schedule 09.07.2020
comment
Нет, не сработало. Я пробовал раньше.   -  person sadisha nadiej    schedule 09.07.2020
comment
Вы уверены, что ваш модальный компонент находится в правильном модуле? И что он импортирует _1 _ / _ 2_?   -  person Dane Brouwer    schedule 09.07.2020
comment
Я не уверен, что правильно интерпретирую предыдущий комментарий. Я немного новичок в angular. BrowserModule и CommonModule используются в качестве импорта в app.module.ts. Я использовал MyDialogModel в качестве entryComponents. Это нормально?   -  person sadisha nadiej    schedule 09.07.2020
comment
Здравствуйте, вы нашли решение? Потому что у меня такой же случай с тобой. Спасибо...   -  person Kenny Basuki    schedule 14.07.2020
comment
Я нашел причину, выложу как ответ   -  person sadisha nadiej    schedule 14.07.2020

Ответы (3)


arrow_upward
3
arrow_downward

Все, что мне нужно было сделать, это добавить DialogComponent в объявления модуля:

declarations: [..., MyDialogComponent]

Нет необходимости хранить код компонента в одном файле.

person Mutual Exception    schedule 24.01.2021

arrow_upward
1
arrow_downward

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

person sadisha nadiej    schedule 14.07.2020

arrow_upward
1
arrow_downward

Все, что вам нужно сделать, это добавить диалоги в импорт и объявления вашего модуля. В том же модуле, где объявлен компонент, в котором объявлены ваши диалоги.

person Rharris389    schedule 17.12.2020