Question

我正在尝试使用要迭代的集合中的变量来设置ngFor循环中定义的html元素的宽度。我下面的代码没有给我错误，但看来我做错了什么。这是设置宽度的可接受方法吗？如果可以，我在这里做错了吗？

export class ColumnValue {
    value: string;
    width: string;
}

export class GridHeader {
    values: Array<ColumnValue> = new Array();
}

export class GridData {
    headers: Array<GridHeader> = new Array();
}

标记

<div *ngFor="let header of gridData.headers">
  <div *ngFor="let value of header.values">
     <div class="gridHeader" [ngStyle]="{'width': 'value.width' }" > 
        {{value.value}}
     </div>
  </div>
</div>

未设置宽度，当我检查元素时，看到了[object Object]

<div _ngcontent-apy-c9="" class="gridHeader" ng-reflect-ng-style="[object Object]">Column Header Text 1</div>

Answer 1

当我删除ngStyle中引用的变量周围的引号时，问题已解决。

已更改

<div class="gridHeader" [ngStyle]="{'width': 'value.width' }" >

收件人

<div class="gridHeader" [ngStyle]="{'width': value.width }" >

使用ngFor中复杂对象的值设置ngStyle-Angular 7

1 个答案: