时间戳

首页 > 解决方案 > 为什么 ngStyle 总是在 Angular 中选择 else case

angular - 为什么 ngStyle 总是在 Angular 中选择 else case

问题描述

我有一个使用 ngStyle 的组件，但它总是返回 else 条件，即使我已经检查过，设置了 fiedLand 并且在更改之后我也尝试了 detectChanges() 但它没有更新。span 元素确实更新了，它使用了 fieldLang，所以我真的不知道为什么。

名称.component.html

<div class="item noBottom" [ngClass]="{
  'has-danger': nameEn.invalid || nameFr.invalid || nameDe.invalid || nameIt.invalid,
  'has-success': nameEn.valid && nameFr.valid && nameDe.valid && nameIt.valid
}">
<div class="d-flex" [ngStyle]="{'display': (fieldLang != 'en' && fieldLang != '*') ? 'none !important' : 'inherit'}">
   ...
</div>
<div class="d-flex" [ngStyle]="{'display': (fieldLang != 'de' && fieldLang != '*') ? 'none !important' : 'inherit'}">
   ...
</div>
<div class="d-flex" [ngStyle]="{'display': (fieldLang != 'it' && fieldLang != '*') ? 'none !important' : 'inherit'}">
   ...
</div>

名称.component.js

import { Component, Input, Output, EventEmitter, OnInit, ChangeDetectorRef } from '@angular/core';
import { Subscription } from 'rxjs';
import { CacheService } from 'src/app/shared/cache.service';

@Component({
  selector: 'field-names',
  templateUrl: './names.component.html',
  styleUrls: ['./names.component.scss']
})
export class NamesComponent implements OnInit {
  @Input('disabled') editMode;
  @Input() value: MultiLangTxtModel;
  @Output() value2 = new EventEmitter<MultiLangTxtModel>();

  private fieldLang = '*';
  fieldLangSubscr: Subscription;

  constructor(private cdRef:ChangeDetectorRef, private cache: CacheService) {
    this.fieldLangSubscr = this.cache.subjectFieldLang.subscribe((l: string) => {
      this.fieldLang = l; 
      this.cdRef.detectChanges();
    });
  }

  ngOnInit() {
    if(!this.value) {
      this.value = {l10n:{de:null,en:null,fr:null,it:null}};
      // this.cdRef.detectChanges();
    }
  }

  onChange() {
    this.value2.emit(this.value);
  }
}

标签： angulartemplatesng-style

解决方案

在 HTML 文件中使用可观察变量和异步管道

<div class="d-flex" [ngStyle]="{'display': ((fieldLangSubscr | async) != 'en' && (fieldLangSubscr | async) != '*') ? 'none !important' : 'inherit'}">

...

替换构造函数代码如下

fieldLangSubscr: any;

  constructor(private cdRef:ChangeDetectorRef, private cache: CacheService) {
    this.fieldLangSubscr = this.cache.subjectFieldLang;
  }

推荐阅读