Ionic6-for回圈內的ngIf或ngSwitch具有動態填充的值

我是角度的新手，我正在嘗試解決以下問題。花了將近 3 個小時瀏覽檔案和 YouTube 視頻，但沒有運氣。

用例 - 根據來自資料饋送的狀態更改按鈕顏色。例如：如果 feed.status 為 Open，則按鈕為藍色。如果 feed.status 關閉則為綠色，如果 feed.status 暫停則為紅色。

在我的 component.ts 檔案中 -

   feedData: any;
   show="Open";

..... more code that completes the component implementation 

在我的 component.html 檔案中

  <ion-card *ngFor="let feed of feedData">
   <div *ngIf="show == feed.status">
    <ion-item lines="none">
       <ion-button slot="start" color="red">{{ feed.status }}</ion-button>
    </ion-item>
   </div>
  </ion-card>

上面的代碼不起作用。我真正需要做的是根據 feed.status 中存盤的值更改顏色。我該怎么做？

uj5u.com熱心網友回復：

以下是代碼

HTML

  <ion-list>
    <ion-item
      *ngFor="let f of feeds"
      [ngClass]="{
        'open-status': f.status == 'Open',
        'closed-status': f.status == 'Closed',
        'paused-status': f.status == 'Paused'
      }"
    >
      <div>{{ f.label }}</div>
    </ion-item>
  </ion-list>

CSS

.open-status{
  color:blue;
}
.closed-status{
  color: green;
}
.paused-status{
  color: red;
}

零件

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  
  feeds = [
    {
      label: 'Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print,', status: 'Open'
    },
    {
      label: 'Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print,', status: 'Closed'
    },
    {
      label: 'Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print,', status: 'Paused'
    },
    {
      label: 'Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print,', status: 'Open'
    },
  ]

}

uj5u.com熱心網友回復：

Nathash Kumar 的答案的重要部分是 [ngClass]。

如果我們采用您的代碼：

<ion-card *ngFor="let feed of feedData">
   <div *ngIf="show == feed.status">
    <ion-item lines="none">
       <ion-button slot="start" [ngClass]="{
    'open-status': f.status == 'Open',
    'closed-status': f.status == 'Closed',
    'paused-status': f.status == 'Paused'
  }">{{ feed.status }}</ion-button>
    </ion-item>
   </div>
  </ion-card>

ngClass 是做什么的？它根據 f.status 值將類添加到按鈕。之后您可以通過 css 訪問它并更改那里需要的所有內容。

另一個提示，如果您更頻繁地重用該狀態，請使用列舉，這樣您就不會因拼寫錯誤而陷入困境。

export enum FeedStatus {
  OPEN = 'Open',
  CLOSED = 'Closed',
  PAUSED = 'Paused',
}

比你可以像這樣將它匯入到你的組件檔案中：

public feedStatus: typeof FeedStatus = FeedStatus;

之后您可以通過 html 訪問它

...f.status == feedStatus.OPEN

檢查https://www.vitamindev.com/angular/how-to-use-enum-in-html/以獲取有關在模板中使用列舉的更多資訊。

uj5u.com熱心網友回復：

ngSwitch 是這種場景的正確解決方案。

<ion-card *ngFor="let feed of feedData" [ngSwitch]="feed.status" [routerLink]="[feed.id]">
  <ion-item lines="none">
    <div *ngSwitchCase="'Open'">
       <ion-button slot="start" color="success">{{ feed.status }}</ion-button>
    </div>
    <div *ngSwitchCase="'Close'">
       <ion-button slot="start" color="danger">{{ feed.status }}</ion-button>
    </div>
    <div *ngSwitchDefault>
       <ion-button slot="start" color="primary">{{ feed.status }}</ion-button>
    </div>
  </ion-item>
</ion-card>

標籤：有角度的 离子框架

上一篇：我可以在Ionic應用程式中同時使用firebase springboot

下一篇：在NGRX狀態下保存snapshotChanges檔案會引發錯誤：無法凍結