It is example of very simple state engine on Angular II.
Run there https://de7.unix7.org
<h5>{{ header }}</h5> {{ message }} <table> <thead> <tr> <th>#</th> <th>имя</th> <th>рейтинг</th> <th>состояние</th> </tr> </thead> <tbody> <tr *ngFor="let item of dataRecords; let i = index" > <td>{{ i + 1 }}</td> <td [ngStyle]="setStyle(i)" >{{ item.name }}</td> <td>{{ item.rate / 2}}</td> <td> <button (click)="upRate(item)" [ngClass]="setButton(item)">{{ item.stateDesc }}</button> </td> </tr> </tbody> </table>
import { Component } from '@angular/core'; import { DataRecord } from './data-record'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { header = 'Продавцы'; message = ''; topRate = 0 dataRecords = [ new DataRecord(1, "Борис Рубекин", 0, 'free', 'свободен'), new DataRecord(2, "Андрей Светлов", 0, 'free', 'свободен'), new DataRecord(3, "Олег Шавкунов", 0, 'free', 'свободен'), new DataRecord(4, "Борис Гребенщиков", 0, 'free', 'свободен') ]; setStyle(index: number) : object { if (index == 0) return {'color' : 'red' } if (index == 1) return {'color' : 'green' } console.log(index) } setButton(item: DataRecord) : any { if (item.state === 'free') return ['button', 'success'] if (item.state === 'busy') return ['button', 'warning'] return ['button'] } upRate(item: DataRecord) : void { this.dataRecords.forEach((elem) => { if (item.id === elem.id) { if (elem.state === 'free') { this.topRate += 1 elem.state = 'busy' elem.stateDesc = 'занят' elem.rate += 4 } else if (elem.state === 'busy') { elem.state = 'free' elem.stateDesc = 'свободен' elem.rate -= 2 } } }); this.dataRecords = this.dataRecords.sort(function(a, b) { if (a.rate > b.rate) { return 1; } if (a.rate < b.rate) { return -1; } return 0; }); }; }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
export class DataRecord { constructor( public id: number, public name: string, public rate: number, public state: string, public stateDesc: string, ) { } }