如何将动态信息引入基于离子框架的卡片？

Question

我需要在基于离子框架的卡片上显示动态信息。

下面是代码片段：

<ion-row>
<ion-col size="12" *ngFor="let palabra of palabras | async; let i = 
index">

<ion-card clas="welcome-cards" (click)="reproducirSonido(palabra)">
  <ion-card-header (click)="toggleSection(i)" class="header">
      <ion-card-title class="ion-text-center">{{palabra.nombre}}</ion- 
card-title>
    </ion-card-header>
    <ion-card-content [ngClass]="{'detail-enabled': clicked[i], 'detail- 
off': !clicked[i]}">
                <ion-img [src]="palabra.imagen"></ion-img>
    </ion-card-content>      
</ion-card>
</ion-col>
</ion-row>

<!--.ts code-->
  toggleSection(i) {
 this.clicked[i] = !this.clicked[i];
 }

Answer 1

您需要return将来自服务的数据作为 Observable 并将数据对象声明为 Observable 接口的实例；

否则，您只需删除模板中的 | async 管道即可。

但是，您可以执行以下操作：

fetchData(uuid){
  this.dataObject$ = this.afDb.object(`resource/${uuid}`).valueChanges();
}

.valueChanges() 为您提供一个可观察对象，并会在发出新值或修改现有值时自动更新。

如何将动态信息引入基于离子框架的卡片？

How can I bring dynamic information to an ionic framework based card?

ionic4