如何设置默认键 javascript 对象？答案

【问题标题】：How can I set a default key javascript object?如何设置默认键 javascript 对象？
【发布时间】：2021-07-26 01:06:33
【问题描述】：

有没有什么方法可以为 Javascript 中的对象设置 default 键，就像我们可以使用 switch 一样？

如果任何其他键不匹配，我想调用该特定键。场景请参考以下示例：

app.component.css

.custom {
  color: aqua;
}

.success {
  color: green;
}

.danger {
  color: red;
}

.wetght {
  font-weight: bold;
}

app.component.html

<input class="wetght default {{custom[xyz.abc]}}" [value]="xyz.abc"/><br>
<input class="witght {{custom[xyz.def]}}" [value]="xyz.def"/><br>
<button (click)="abc()">abc</button>

app.component.ts

export class AppComponent  {
  xyz = {abc: '', def: ''};
  custom = {
    'PASS': 'success',
    'FAIL': 'danger'
  };

  abc() {
    this.xyz = {abc: 'PASS', def: 'uuu'};
  }
}

所以这是我的情景。我想要的是，如果名为custom 的对象变量中不存在密钥，那么它应该寻找默认密钥？

我已经尝试过使用ng-class，它运行良好，但我想深入了解一些不同的东西。我也为上述场景创建了一个有效的example。

【问题讨论】：

标签： javascript html css angular typescript

【解决方案1】：

您可以在AppComponent 中编写一个方法来计算目标类名

app.component.ts

export class AppComponent  {
  ...
  getOrDefault(key: string): string {
    return this.custom[key] || 'default';
  }
}

app.component.html

<input ngClass="['wetght', getOrDefault(xyz.abc)]" [value]="xyz.abc"/><br>
<input ngClass="['wetght', getOrDefault(xyz.def)]" [value]="xyz.def"/><br>

【讨论】：

【解决方案2】：

编写一个快速指令以基于另一个值绑定类可能会更好。

试试下面的

status.directive.ts

import {
  Directive,
  OnChanges,
  SimpleChanges,
  Renderer2,
  ElementRef,
  Input
} from "@angular/core";

@Directive({
  selector: "[status]"
})
export class StatusDirective implements OnChanges {
  @Input() mapping: { [state: string]: string };
  @Input() state: string;
  @Input() default: string = "default";

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  ngOnChanges(change: SimpleChanges) {
    if (!!this.state) {
      this.renderer.addClass(
        this.elementRef.nativeElement,
        !!this.mapping[this.state] ? this.mapping[this.state] : this.default
      );
    }
  }
}

app.component.html

<input status [mapping]="custom" [state]="xyz.abc" class="wetght" [value]="xyz.abc"/><br>
<input status [mapping]="custom" [state]="xyz.def" class="wetght" [value]="xyz.def"/><br>
<button (click)="abc()">abc</button>

app.component.css

.custom {
  color: aqua;
}

.default {
  color: blue;
}

.success {
  color: green;
}

.danger {
  color: red;
}

.wetght {
  font-weight: bold;
}

我修改了你的Stackblitz

【讨论】：

谢谢。我已将此答案标记为已批准，因为尽管它很长，但它更精确和清晰

【解决方案3】：

这样的事情应该可以工作：

[class.default]="!custom[xyz.abc]"

【讨论】：

我希望它在 1 内完成，而不是在这里和那里保留这个。如果能做到，那就太好了
那么 ngClass 就是你要找的东西