css - 使用范围变量时 ngStyle 绑定(bind)不起作用

Question

我有以下组件:

@Component({
  template: `
  <div class="container">
    <div *ngFor="let connection of connections">
      <div class="row">
        <div class='col-2'>{{connection.arrivalTime}}</div>
        <div class='col-1'>{{connection.delay}}</div>
          <div class='col-2'>{{connection.actualArrivalTime}}</div>
          <div class='col-1'>{{connection.icon}}</div>
          <div class='col-1'><span [ngStyle]="{'background-color': connection.colors.bg}">{{connection.line}}</span></div>
          <div class='col-3'>{{connection.direction}}</div>
          <div class='col-2'>{{connection.cancelled}}</div>
        </div>
      </div>
    </div>
styleUrls: ['../app.component.css', '../../simple-grid.css'],
})
export class ZVVComponent {


 connections: PublicConnection[] = [];
  displayDate: Date;

  constructor(private zvvService: ZVVService) {

    this.displayDate = new Date();

   zvvService.getConnections(this.displayDate).subscribe(data => {
      data.forEach( (connection) => {
        this.connections.push(new PublicConnection(
          connection.product.line,
          connection.product.longName,
          connection.product.direction,
          connection.cancelled,
          connection.product.icon,
          connection.product.color,
          connection.mainLocation.time,
          connection.mainLocation.countdown,
          connection.mainLocation.realTime.time,
          connection.mainLocation.realTime.countdown,
          connection.mainLocation.realTime.delay,
          connection.mainLocation.realTime.isDelayed,
          connection.mainLocation.realTime.hasRealTime
        ));
      });
    });
  }
}

如您所见，我在其中一个 div 中使用了 ngStyle，并希望将其绑定(bind)到包含颜色的十六进制字符串的变量 connection.colors.bg:

export class Color {
  get fg(): string {
    return this.fg;
  }

  get bg(): string {
    return this.bg;
  }
}

但是，这不起作用，文本仍然是黑色，背景是白色。我究竟做错了什么？当我更改它并在其中写入红色而不是变量时，文本显示为红色。

这是 PublicConnection 代码:

从'./color'导入{颜色};

export class PublicConnection {

constructor(
  public line: string,
  private name: string,
  public direction: string,
  public cancelled: boolean,
  public icon: string,
  public colors: Color,
  public arrivalTime: string,
  private countdown: string,
  public actualArrivalTime: string,
  private actualCountdown: string,
  public delay: string,
  private isDelayed: boolean,
  private hasRealtimeData: boolean
) {
  this.direction = this.direction.replace('ü', 'ü');
  this.direction = this.direction.replace('ö', 'ö');
  this.direction = this.direction.replace('ü', 'ü');
}
}

Answer 1

问题不在于 ngStyle 指令——您正确使用了它。当组件第一次尝试渲染时，很可能数据没有被加载。

由于您的数据是异步的，我猜测在组件呈现和设置背景颜色时，它尚未从服务接收到颜色。

通过将模板中的 connection.color.bg 更改为 connection.color?.bg 来尝试使用安全的导航运算符。

在这里阅读更多相关信息:https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths