Question

我正在遍历包含不同百分比的数组。但是，我想根据数据库中的答案是否等于数组中的值之一来添加类。

以下示例循环遍历数组中的值。我要说的是，“如果答案为'0'，则应用名称为'red'的类，否则，添加'transparent'类。如果答案恰好是“ 20”，请添加类名“琥珀”。如果不是，则为“透明”。

我似乎正在尝试多种多样的选择。

<div *ngFor="let percent of percentages" 
     [ngClass]="{
         (answer =='0') ? 'red':'transparent',
         (answer =='20') ? 'amber':'transparent',         
     }">
     {{ percent }}
</div>

编辑-为了澄清 我正在尝试做的是简化以下内容。这是将每个百分比写为自己的div。我试图做的是达到相同的结果，但是要遍历一系列百分比。

<div [ngClass]="answer==='0' ? 'red' : 'bg-transparent'"> 0% </div>

<div [ngClass]="answer==='25' ? 'amber' : 'bg-transparent'"> 25% </div>

<div [ngClass]="answer==='50' ? 'orange' : 'transparent'"> 50% </div>

Answer 1

将其他条件放入其他选项部分demo

 <div *ngFor="let percent of percentages" 
         [ngClass]="(answer =='0') ? 'red': (answer =='20') ? 'amber':'transparent ">
         {{ percent }}
    </div>

Answer 2

您可以使用 Ternery 运算符

<div *ngFor="let percent of percentages"
 [ngClass]="{ answer == '0' ? 'red' : answer == '20' ? 'amber' : 'transparent'}">
 {{ percent }}
</div>

Answer 3

如何在组件而不是模板中移动条件？

类似这样的东西

enum Dependencies {
    struct Name: Equatable {
        let rawValue: String
        static let `default` = Name(rawValue: "__default__")
        static func == (lhs: Name, rhs: Name) -> Bool { lhs.rawValue == rhs.rawValue }
    }

    final class Container {
        private var dependencies: [(key: Dependencies.Name, value: Any)] = []

        static let `default` = Container()

        func register(_ dependency: Any, for key: Dependencies.Name = .default) {
            dependencies.append((key: key, value: dependency))
        }

        func resolve<T>(_ key: Dependencies.Name = .default) -> T {
            return (dependencies
                .filter { (dependencyTuple) -> Bool in
                    dependencyTuple.key == key
                        && dependencyTuple.value is T
                }
                .first)?.value as! T
        }
    }

    @propertyWrapper
    struct Inject<T> {
        private let dependencyName: Name
        private let container: Container
        var wrappedValue: T { container.resolve(dependencyName) }

        init(_ dependencyName: Name = .default, on container: Container = .default) {
            self.dependencyName = dependencyName
            self.container = container
        }
    }
}

Answer 4

ngClass的语法为{'class1'：condition1，'class2'：condition2 ...}因此，我认为这种说法更为明确

<div class="transparent" [ngClass]="{'red':answer == '0',
                                     'amber':answer == '20',
                                     'orange':answer==50}">

Angular-NgClass，多个条件

4 个答案: