1
votes

Pourquoi ng-if ne fonctionne pas dans une boîte de dialogue mat

J'ai créé un composant mat-dialog pour déclencher la réponse http. Lorsque j'inclus une instruction ngIf dans le html pour le dialogue mat, elle n'est pas gérée. Sur la console, il affiche un avertissement comme suit.

Impossible de se lier à 'ngIf' car ce n'est pas une propriété connue de 'div'.

NgIf fonctionne très bien dans tous les autres composants du projet.

Appel de mat-dialog dans un fichier dactylographié.

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

code html

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

Pourquoi ng-if ne fonctionne pas dans une boîte de dialogue mat?

angular-material angularjs angular-ng-if angularjs-ng-if

6 commentaires

Est-ce que cela répond à votre question? Impossible de se lier à «ngIf» car ce n'est pas une propriété connue de "div"

Non, ça n'a pas marché. Je l'ai essayé plus tôt.

Êtes-vous sûr que votre composant modal est dans le bon module? Et qu'il importe BrowserModule / CommonModule ?

Je ne suis pas sûr d'avoir bien compris le commentaire précédent. Je suis un peu nouveau en angular. BrowserModule et CommonModule sont utilisés comme importations dans le fichier app.module.ts. J'ai utilisé MyDialogModel comme entryComponents. C'est OK?

Bonjour, avez-vous trouvé la solution? Parce que j'ai le même cas avec toi. Merci...

J'ai trouvé la raison, je la posterai comme réponse

3 Réponses :

1
votes

Je publie ceci en espérant que quelqu'un le trouvera utile. Ce n'est pas la réponse exacte à ce problème, mais c'est ainsi que je surmonte mon scénario. Dans mon cas, j'utilisais le composant mat-dialog comme composant d'entrée dans app.module.ts

@NgModule({
  declarations: 
[
UserAccountInfoReloadPopupDialogComponent
],

Pour une raison quelconque, ng-si cela ne fonctionne pas dans la boîte de dialogue. Ce n'est pas seulement pour ng-if, tous les autres comme ng-for n'étaient pas disponibles.

J'ai résolu le problème en définissant les deux composants dans le même fichier 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
}

0 commentaires

1
votes

Tout ce que vous avez à faire est d'ajouter les boîtes de dialogue à vos importations et déclarations de module. Dans le même module où le composant dans lequel vos dialogues sont déclarés est déclaré.

0 commentaires

1
votes

Tout ce que j'avais à faire était d'ajouter le DialogComponent aux déclarations du module:

declarations: [..., MyDialogComponent]

Pas besoin d'avoir le code du composant dans le même fichier.

0 commentaires