css - 为接收到的数据添加动态样式 Angular Material

Question

我想添加一些 CSS 样式来突出显示每个文本，例如：

我不想要任何十字按钮，也不想给用户任何添加标签的选项。我正在从 Angular 8 中的 RESTful api 接收数据作为由 , （逗号）分隔的文本，并且我将数据显示为文本。它看起来像一个段落。我想通过将其拆分为 , （逗号）来替换每个这样的文本句子。

TS代码：

this.user.data = response.Items;
for (let i = 0; i <= this.user.data.length; i++){
     this.splitString[i] = this.user.data[i].abc.split(',');
     this.finalSplittedString = [...this.splitString[i]];
 }

我正在接收一个对象数组并将其存储在user.data现在我正在拆分对象参数上的字符串abc。JSON对象

[{"names":"Hello","abc":"abcdef,ghijk,lmnop"},{"names":"World","abc":"qrstuv,wxyz"}]

我想拆分ABC并编写它们，如下图所示。此外，它们应该显示在正确的表格行中。

HTML 代码

<ng-container matColumnDef="abc">
            <th mat-header-cell *matHeaderCellDef> ABC </th>
            <td mat-cell *matCellDef="let element" class="addTag"> {{element.abc}}</td>
        </ng-container>

我怎样才能在这里绑定新的分裂刺？

标签： cssangularangular-materialangular8

Answer 1

关键是使用split(",")函数将字符串转换为数组，以便*ngFor在html中使用显示

我为您创建了一个示例： https ://stackblitz.com/edit/angular-8-getting-started-xpndxn?file=src/app/product-list/product-list.component.ts