Я хотел, чтобы содержимое отображалось другим цветом, когда пользователь выбрал опцию. Например, в раскрывающемся списке есть три варианта для элементов. Если пользователь выберет «Подтверждено в заполнителе состояния», содержимое будет отображаться «Подтверждено» зеленым, а когда пользователь выберет «Не подтверждено», элемент будет отображать формулировку «Не подтверждено» красным. Если пользователь выберет «Подтверждено и отправлено», цвет покажет Желтый. Как мне заставить его работать? Я новичок в 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>
2 ответа
Несколько вещей, которые я сделал:
- мы сохранили значение, выбранное из выпадающего списка в переменной
- для каждой строки в нашей таблице мы проверили статус по этой переменной и в случае совпадения мы установили соответствующий класс
Соответствующий 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;}
Полный рабочий стек для бликов здесь
Вы должны создать 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
Похожие вопросы
Новые вопросы
css
CSS (каскадные таблицы стилей) - это язык таблиц стилей представления, используемый для описания внешнего вида и форматирования документов HTML (язык разметки гипертекста), XML (расширяемый язык разметки) и элементов SVG, включая (но не ограничиваясь) цвета, макет, шрифты, и анимации. Также описывается, как элементы должны отображаться на экране, на бумаге, в речи или на других носителях.