javascript - Angular //innerHTML 数据绑定

Question

我正在尝试设置一个动态表格，表格的一个单元格需要填充一个进度条。我为此尝试了一个 innerHTML 解决方案，但不起作用。有什么建议么？

这是我的 dahsboard.component.html 代码，阵营不起作用的是[innerHTML]="tableRow.limitOccupancy"：

<div class="divTableRow" *ngFor="let tableRow of tableRows">
   <div class="divTableCell">{{ tableRow.name }}</div>
   <div class="divTableCell">{{ tableRow.value }}</div>
   <div class="divTableCell">{{ tableRow.previousValue }}</div>
   <div class="divTableCell">{{ tableRow.delta }}</div>
   <div class="divTableCell">{{ tableRow.rafLimit }}</div>
   <div [innerHTML]="tableRow.limitOccupancy" class="divTableCell"></div>
   <div class="divTableCell">{{ tableRow.date }}</div>
</div>

这里是我的dashboard.component.ts，其目的是limitOccupancy 将获得将使用innerHTML 传输的progressBar 模板：

progressBar = '<div class="progress-bar"><span></span></div>';

tableRows = [
    {
        name: 'LEVEL 3',
        value: '8%',
        previousValue: '7%',
        delta: '-11000',
        rafLimit: '12%',
        limitOccupancy: this.progressBar,
        date: '12.09.20',

    },
    {
        name: 'LEVEL 1',
        value: '8%',
        previousValue: '7%',
        delta: '-11000',
        rafLimit: '12%',
        limitOccupancy: this.progressBar,
        date: '12.09.20',
    },
    
];

标签： javascriptangulartypescript

Answer 1

没有问题。我可以看到 div 正在加载并在 style.css 中添加了类。它也添加了CSS。请让我知道有什么问题。

https://stackblitz.com/edit/angular-ivy-1dsmxf?file=src%2Fapp%2Fapp.component.ts