如何在 Ionic 4 中的 ion-item 上叠加文本

Question

我有一个如下图所示的列表。 当我单击每个项目上的加号图标时，我将调用 rest api 来更新数据库。 当我得到回复时，我想用透明黑色背景覆盖成功文本消息几秒钟，如图所示。

谁能指导我如何实现这一目标？ 我们可以使用 css 或任何 angular 材料来实现这一点吗？

下面是代码。

<ion-card *ngFor="let item of items">
    <ion-row>
      <ion-col size="3">
        <ion-img width="80" height="80" [src]="item.imagePath"></ion-img>
      </ion-col>
      <ion-col size="7" >
       <ion-label class="item-name">item.name</ion-label>
       <ion-label class="item-price">item.cost</ion-label>
       <ion-label class="item-date">item.date</ion-label>        
      </ion-col>
      <ion-col size="2">
       <ion-icon class="select-icon" name="add-circle"></ion-icon>
      </ion-col>
    </ion-row>
   </ion-card>

Answer 1

 add(item) { item.showMessage = true; setTimeout(() => { delete item.showMessage; }, 3000); }

 .success-message { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: none; justify-content: center; align-items: center; background: rgba(00,00,00,0.7); z-index: 1; } ion-card.showMessage {.success-message { display: flex; } }

 <ion-card *ngFor="let item of items" [class.showMessage]="item?.showMessage"> <div class="success-message">Added to your coupon list.</div> <ion-row> <ion-col size="3"> <ion-img width="80" height="80" [src]="item.imagePath"></ion-img> </ion-col> <ion-col size="7" > <ion-label class="item-name">item.name</ion-label> <ion-label class="item-price">item.cost</ion-label> <ion-label class="item-date">item.date</ion-label> </ion-col> <ion-col size="2"> <ion-icon class="select-icon" name="add-circle" (click)="add(item)"></ion-icon> </ion-col> </ion-row> </ion-card>