Értem! Ebben az esetben hozzáadhatsz egy változót a komponensedhez, amely tárolja a visszajelzési üzenetet, és a sablonban (HTML) megjeleníthetsz egy .card div-et, amely az üzenetet tartalmazza. Amikor a visszajelzési üzenet megváltozik, az automatikusan frissíteni fogja a nézetet.
- Komponens (.ts): Add hozzá az alábbi változókat:
feedbackMessage: string | null = null; // Az üzenet tárolására
feedbackType: 'success' | 'error' | null = null; // Az üzenet típusának tárolására (opcionális)Módosítsd az onSubmit metódust, hogy beállítsa ezeket a változókat:
...
.then(() => {
console.log('Movie updated successfully in Firestore');
this.feedbackMessage = 'Movie updated successfully in Firestore';
this.feedbackType = 'success';
this.finished.emit();
})
.catch((error) => {
console.error('Error updating movie in Firestore: ', error);
this.feedbackMessage = 'Error updating movie in Firestore: ' + error.message;
this.feedbackType = 'error';
});
...- Sablon (.html): Add hozzá a következő kódot az űrlap alá, hogy megjelenítse a
.carddiv-et az üzenettel:
<div *ngIf="feedbackMessage" class="card" [ngClass]="{'success-card': feedbackType === 'success', 'error-card': feedbackType === 'error'}">
{{ feedbackMessage }}
</div>Ebben a példában az ngIf direktívával ellenőrzöm, hogy létezik-e visszajelzési üzenet, és csak akkor jelenítem meg a .card div-et, ha igen. Az ngClass direktívával pedig dinamikusan hozzárendelheted a success-card vagy error-card osztályokat az üzenet típusától függően.
- Stílusok (.css vagy .scss): Most definiálj néhány stílust a
.card,.success-cardés.error-cardosztályokhoz:
.card {
padding: 10px;
margin-top: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
.success-card {
border-color: green;
color: green;
}
.error-card {
border-color: red;
color: red;
}Ezzel a megoldással minden alkalommal, amikor a visszajelzési üzenet változik, az automatikusan frissíti az űrlap alatti .card div tartalmát, és megjeleníti a felhasználónak.