arrays - Angular 6 *ngFor 为第一个,奇数,偶数和最后一个显示不同的样式
问题描述
我正在学习 Angular 6,只是想把我学到的一些东西放在一起,我目前遇到了一个我找不到答案的问题。我正在尝试使用 *ngFor 更改 LI 的样式,具体取决于索引是 First、Last、Odd 还是 Even。到目前为止,一切正常,但我不知道如何为 Last 做这件事,因为我将新对象添加到列表中的所有内容,显然是最后一个,所以它为最后一个渲染颜色。
我知道该怎么做,但真正的问题是我正在从表单动态地将东西添加到我的列表中,我不确定如何评估 Last 以便其他人变成正确的颜色。
请记住,我仍然是一个新手,它可能看起来很乱,而且我也明白我正在做的一些客户端验证可能不是最佳的或自 HTMl5 以来是必需的,但我学会了。
这是我的组件 HTML 代码
>
<h1>List of courses :</h1><br>
<div *ngIf="courses.length > 0; then coursesList else noCourses"></div>
<ng-template #coursesList>
<h2>List of Courses :</h2>
<ul *ngFor="let course of courses; index as i;">
<li [ngStyle]="{'background-color':getColor(i)}" style="color: white;">
<strong>Index : </strong>{{i}} <strong>ID : </strong>{{course.id}} <strong>Name</strong> : {{course.name}}
<button (click)="onRemove(i)">Remove</button>
<button (click)="onModify(i)">Modify</button>
</li>
</ul>
</ng-template>
<ng-template #noCourses>
<h5>There are no courses in this list. Use the form bellow to add some.</h5>
</ng-template>
<div (keyup.enter)="onAdd()">
<span>ID : <input type="number" (keypress)="checkNumber($event)" [(ngModel)]="fields.id" placeholder="Enter an ID"></span>
<span>Name : <input type="text" [(ngModel)]="fields.name" placeholder="Enter a NAME"></span>
<button (click)="onAdd()">Add</button>
<button (click)="onClear()">Clear</button>
</div>
<div *ngIf="isNotNumber" style="background-color: red; color:black"><strong>ID can only be numbers !</strong></div>
<div *ngIf="noValues" style="background-color: red; color:black"><strong>Please fill all fields !</strong></div>
<div *ngIf="noModifyValues" style="background-color: red; color:black"><strong>To modify enter all informations!</strong></div>
.TS 代码
>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
noValues: boolean;
noModifyValues: boolean;
isNotNumber: boolean;
fields: Courses = {id: null, name: null};
courses: Array<Courses> = [];
viewMode: string = null;
checkNumber($event) {
if ($event.keyCode != 13) {
isFinite($event.key) ? this.isNotNumber = false : this.isNotNumber = true;
}
}
onAdd() {
if (!this.fields.id || !this.fields.name) {
this.noValues = true;
} else {
this.courses.push({id: this.fields.id, name: this.fields.name});
this.fields.id = null;
this.fields.name = null;
this.noValues = false;
}
}
onRemove(i) {
this.courses.splice(i, 1);
}
onClear() {
this.courses = [];
this.fields.id = null;
this.fields.name = null;
this.noValues = false;
}
onModify(i) {
if (!this.fields.id || !this.fields.name) {
this.noModifyValues = true;
} else {
this.courses[i].name = this.fields.name;
this.courses[i].id = this.fields.id;
this.noModifyValues = false;
}
}
getColor(i){
if (i % 2 === 0 && i != 0){i = 'odd';}
switch (i) {
case i = 0 : return 'orange';
case i = 'odd' : return 'blue';
}
return 'red';
}
}
interface Courses {
id: number;
name: string;
}
解决方案
如果您只想更改背景颜色,您可以使用 [style.background-color] 并且可以在 .html 中使用三元运算符
<ul *ngFor="let course of courses; let index=i;
let odd=odd;
let last=last;
let first=first">
<li [style.backgound-color]="first?'orange':last?'purple':odd?'blue':'red'">
...
</li>
</ul>
推荐阅读
- algorithm - 从记录集构建嵌套菜单(树)的算法
- perl - Perl chmod 文件超过 260 个字符限制路径长度
- javascript - 当计时器达到特定数字时反应振动电话
- cordova - Outsystems 项目无法编译 cordova 插件,因为未找到 ID 为“kotlin-android”的插件
- python - 我可以检索已经解析的函数定义吗?
- asp.net - 使用 moq 模拟 HttpMessageHandler - 如何获取请求的内容?
- typescript - TypeScript:为什么在实现接口时函数参数不被视为强制性的?
- ios - 尝试使用 FileManager 复制文件时出错:不允许操作
- ruby-on-rails - 由于 Bootsnap 和 Rake 问题,Heroku Rails 构建失败
- javascript - 按属性名称搜索嵌套对象并复制到新对象不会导致所有对象都被复制