Отображать разноцветные детали содержимого для каждого параметра из раскрывающегося списка в Angular Material

Question

Я хотел, чтобы содержимое отображалось другим цветом, когда пользователь выбрал опцию. Например, в раскрывающемся списке есть три варианта для элементов. Если пользователь выберет «Подтверждено в заполнителе состояния», содержимое будет отображаться «Подтверждено» зеленым, а когда пользователь выберет «Не подтверждено», элемент будет отображать формулировку «Не подтверждено» красным. Если пользователь выберет «Подтверждено и отправлено», цвет покажет Желтый. Как мне заставить его работать? Я новичок в Angular. Я пробовал так много способов, но это не сработает.

<mat-form-field>
  <mat-select placeholder="Status" [formControl]="statusTypeFilter">
    <mat-option value="1">Confirmed</mat-option>
    <mat-option value="2">Not Confirmed</mat-option>
    <mat-option value="3">Confirmed and Shipped</mat-option>
</mat-form-field>


<div class="table-container mat-elevation-z8">
  <table mat-table [dataSource]="ItemConfirmationList" multiTemplateDataRows matSort matSortActive="no">
    <ng-container matColumnDef="StatusName">
      <th mat-header-cell *matHeaderCellDef mat-sort- header>Status</th>
      <td mat-cell *matCellDef="let element">{{element.StatusName }}</td>
    </ng-container>
</div>

css angular typescript angular-material

1

Ivana Mica 30 Май 2019 в 04:06

Answer 1

Несколько вещей, которые я сделал:

мы сохранили значение, выбранное из выпадающего списка в переменной
для каждой строки в нашей таблице мы проверили статус по этой переменной и в случае совпадения мы установили соответствующий класс

Соответствующий HTML :

<mat-form-field>
    <mat-label>Status</mat-label>
    <mat-select [(value)]="selected">
        <mat-option *ngFor="let food of foods" [value]="food.value">
            {{food.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>
<!-- <p>You selected: {{selected}}</p> -->
<hr/>
    <table>
        <thead>
            <tr>
                <td> Item </td>
                <td> Status </td>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor='let pickedItem of sampleItems; let idx = index'>
                <tr [ngClass]="setColor(pickedItem.status, idx)">
                    <td> {{pickedItem.item}}</td>
                    <td>
                        <span *ngIf='pickedItem.status == 1'> Confirmed </span>
            <span *ngIf='pickedItem.status == 2'> Not Confirmed </span>
            <span *ngIf='pickedItem.status == 3'> Confirmed and Shipped </span>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>

Соответствующий ts :

setColor(statusVal, idx){
  let returnedClass:string ='defaultClass';
  (statusVal == this.selected && statusVal ===1) ? returnedClass = 'confirmedClass' : 'defaultClass';
  (statusVal == this.selected && statusVal ===2) ? returnedClass = 'notConfirmedClass' : 'defaultClass';
  (statusVal == this.selected && statusVal ===3) ? returnedClass = 'shippedClass' : 'defaultClass';
  return returnedClass;
}

Соответствующий css :

.confirmedClass { color:green;}
.notConfirmedClass { color:red;}
.shippedClass { color:orange;}
.defaultClass { color:#000;}

Полный рабочий стек для бликов здесь

0

Akber Iqbal 30 Май 2019 в 05:51

Answer 2

Вы должны создать 3 стиля CSS, каждый из которых имеет свой статус

Css

.confirmed {
  color: green;
}
.not-confirmed {
  color: red
}

Затем в вашем шаблоне используйте [ngClass] для применения CSS

<td [ngClass]="{ 'confirmed': status === 'Confirmed', 'not-confirmed': status === 'Not Confirmed', 'confirm-shipped': status === 'Confirmed and Shipped' }"
 mat-cell *matCellDef="let element">
   {{element.StatusName}}
</td>

PS: я предположил, что вы храните выпадающее значение в переменной status

0

Prashant Pimpale 30 Май 2019 в 05:12

Отображать разноцветные детали содержимого для каждого параметра из раскрывающегося списка в Angular Material

2 ответа

Похожие вопросы

Новые вопросы

css