Question

我正在学习Angular 6，只是想把一些我学到的东西放到ghutter上，我目前遇到了一个我找不到答案的问题。我正在尝试使用* 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;
}

Image of the code in action for better understanding.

Answer 1

如果只想更改背景颜色，则可以使用[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>

Answer 2

尝试这样的事情

"<div class=''>Text</div>"

希望它有效-编码愉快！！

Answer 3

感谢拉胡尔。我缺少的部分是评估课程中是否有内容。但是，我不得不在Odd和Last后面添加几行，如下所示：

getColor(i){
    if (this.courses && i != 0 && (this.courses.length - 1 === i)) {i = 'last'}
    if (i % 2 === 0 && i != 0 && i != 'last'){i = 'odd';}
    switch (i) {
      case i = 0 : return 'orange';
      case i = 'odd' : return 'blue';
      case i = 'last' : return 'purple';
    }
    return 'red';
  }

快速提问。似乎很多IF和&&并检查特定的东西。那是正确的方法吗？

Answer 4

您可以使用if else梯形图，而不是使用if else进行混淆，并像下面给出的那样切换和分配

getColor(i)
{
  if(this.courses)
  {
  if(i==0)
      return "orange";
  else if(i==this.courses.length-1)
      return "purple";
  else if (i%2==0)
      return "red";
  else
      return "blue";
  }
}

Angular 6 * ng用于显示首尾，奇数，偶数和尾数的不同样式

4 个答案: