我有一个数组显示数据作为mat-select下拉列表。用户可以选择任何标签，他想要的。我们也有一些自由形式的文本字段内的标签下拉列表中，用户可以创建自己的自定义文本除了标签数组。见下文：

显示.组件.html

<mat-form-field class="full-width">
                                <mat-label class="full-width">Select Tag</mat-label>
                                <mat-select formControlName="tagsControl" [(ngModel)]="project.tags" multiple>

                                    <mat-select-trigger>
                                        <mat-chip-list>
                                            <mat-chip *ngFor="let tagging of firstFormGroup.value.tagsControl" [removable]="true"
                                                (removed)="onTaggingRemoved(tagging)">
                                                {{ tagging }}
                                                <mat-icon matChipRemove>cancel</mat-icon>
                                            </mat-chip>
                                        </mat-chip-list>
                                    </mat-select-trigger>

                                    <mat-option *ngFor="let tagging of tagsList"
                                        [value]="tagging">{{tagging}}</mat-option>

                                        <mat-form-field style="margin-left: 17px; margin-top: 8px;">
                                            <input matInput placeholder="Add New Tag" #input>
                                        </mat-form-field>
                                        <button mat-stroked-button color="primary" style="margin-left: 4px;" class="common-button"
                                            (click)="addNewTags(input.value)">
                                            Add</button>
                                </mat-select>
                            </mat-form-field>

显示.组件.ts

onTaggingRemoved(tagging: string){
        const taggings = this.firstFormGroup.value.tagsControl as string[];
        this.removeFirst(taggings, tagging);
        this.firstFormGroup.controls['tagsControl'].patchValue(taggings);
      }
      removeFirst<T>(array: T[], toRemove: T): void {
        const index = array.indexOf(toRemove);
        if (index !== -1) {
          array.splice(index, 1);
        }
      }

addNewTags(value: string) {
        this.tagsList.push(value);
    }

表格.组件.ts

tags: string[] = ["Prod", "Stg", "Dev", "QA"];

表格.组件.html

<ng-container matColumnDef="tags">
                            <mat-header-cell *matHeaderCellDef>
                                Tags </mat-header-cell>
                            <mat-cell *matCellDef="let element; let i = index;">
                                <span *ngIf="element.tags && element.tags.length < 35" matTooltipPosition="above"
                                    matTooltip="{{element.tags}}">
                                    
                                     <span *ngIf="element.tags == 'Prod'">
                                        <span class="badge badge-pill bg-info font-color-tags">{{ element.tags.join(', ') }}</span>
                                    </span>
                                    <span *ngIf="element.tags == 'Stg'">
                                        <span class="badge badge-pill bg-primary font-color-tags">{{ element.tags.join(', ')}}</span>
                                    </span>
                                    <span *ngIf="element.tags == 'Dev'">
                                        <span class="badge badge-pill bg-secondary font-color-tags">{{ element.tags.join(', ')}}</span>
                                    </span>
                                    <span *ngIf="element.tags == 'QA'">
                                        <span class="badge badge-pill bg-success font-color-tags">{{ element.tags.join(', ')}}</span>
                                    </span>                      
                                     
                                </span>
                                <span *ngIf="element.tags.length == 0">
                                    -
                                </span>
                            </mat-cell>
                        </ng-container>

我的问题是我添加徽章的颜色代码到不同的数组项的基础上，它的值。我的意思是，如果标签数组项的值是“QA”，我添加不同的颜色，类似的“产品”不同的颜色。但我需要添加一些自定义徽章颜色的自定义标签，用户创建自己的标签以外的数组。我计划添加一个独特的徽章，所有自定义颜色徽章，那么如何实现这一点？
请帮帮我。