为接收到的数据添加动态样式 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>

我如何在此处绑定新的分裂刺？

Answer 1

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

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

Answer 2

例如，在您的 TS 文件中，您有这个-

export class ChipsOverviewExample {

  availableColors:string[];
  sentence:string;
  constructor(){
    this.sentence="Green,red,pink";
    this.availableColors=this.sentence.split(',');

  }
  
}

在您的 HTML 中，您可以使用基本的芯片-

<mat-chip-list aria-label="Fish selection">
 <mat-chip class="chips" *ngFor="let chip of availableColors" >
    {{chip}}
  </mat-chip>
</mat-chip-list>

并且在您的 CSS 中，您可以相应地设置样式-

.chips{
  background-color: chocolate;
}