Question

我是Ionic应用程序开发的新手，我一直在关注相同的教程。我正在尝试动态地为#include <iostream> struct Interface1 { virtual int getID()=0; }; struct Interface2 : virtual Interface1 { virtual int add(int a,int b)=0; }; struct Base1 : virtual Interface1 { virtual int getID() override { return 1; } }; struct myClass: Interface2, Base1 { virtual int add(int a,int b) override { return a+b; } }; int main() { myClass c; std::cout << c.getID() << "\n"; // prints 1 }分配颜色，但它无效。

因此，在我的<ion-badge>文件中，我有以下内容

.html

在我的<ion-col width-20> <ion-badge [class]="getWinOrLossBageClass(game)">{{getWinOrLoss(game)}}</ion-badge> </ion-col>文件中

.ts

显示文本但不显示颜色的徽章。

我做错了什么？

Answer 1

首先，您为这些类badge-color-primary，badge-color-danger设置了样式吗？因为它们不是离子徽章的默认等级。

第二，离体徽章始终有两个默认班级badge和badge-ios或badge-md。因此，如果您将类设置为[class]=""，则会覆盖所有这些类，徽章将无效最后，如果您只想动态更改离子徽章颜色，可以这样做：
方法1：更改颜色属性（推荐）。

<ion-badge color="{{getWinOrLossColor(game)}}"></ion-badge>
getWinOrLossColor(game) { 
    return game.scoreDisplay.indexOf('W') === 0 ? 'primary' : 'danger';
}

Methood 2：像你一样更改课程，但通过其他方式（不推荐）：

<ion-badge [ngClass]="{'badge-ios-primary':game.scoreDisplay.indexOf('W') === 0, 'badge-ios-danger':game.scoreDisplay.indexOf('W') != 0}"></ion-badge>

Answer 2

由于结果来自您的另一个来源，您的.ts文件，您可能需要使用异步管道等待结果，以选择颜色。

<ion-col width-20>
    <ion-badge [class]="getWinOrLossBageClass(game)**|async**">
{{getWinOrLoss(game)}}</ion-badge>
</ion-col>

我使用以下内容，其中IsOnline是我的.ts文件中的Observable，然后在此代码返回时在HTML中设置徽章的颜色。

<ion-badge [color]="(IsOnline|async)?'secondary':'danger'">

chrome浏览器中的离子徽章问题

2 个答案: