Angular2 Material：迭代选择选项答案

【问题标题】：Angular2 Material: iterating through select optionsAngular2 Material：迭代选择选项
【发布时间】：2018-09-23 07:13:04
【问题描述】：

我有一个通过 open() 方法打开的选择选项列表，但我还想每隔几秒钟迭代并突出显示列表（即背景：突出显示的选项上的红色）并循环遍历它。这可能吗？

https://stackblitz.com/edit/angular-kc1uhi?file=app%2Fselect-overview-example.ts

【问题讨论】：

你想强调什么？你的意思是你想每隔几秒更新一次列表？
不，我想每隔几秒突出显示列表中的一项
你的意思是改变背景还是什么？
是的，改变项目的背景
添加了答案。干杯！

标签： angular angular-material angular-material2

【解决方案1】：

动态更新您的选项的类并在mat-option 中将其分配为：

HTML

<mat-form-field>
  <mat-select #mySelect placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [ngClass]="food.class" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

CSS

.highlight {
    background-color: red;
}

组件

foods = [
  {value: 'steak-0', viewValue: 'Steak', class: 'highlight'},
  {value: 'pizza-1', viewValue: 'Pizza', class: ''},
  {value: 'tacos-2', viewValue: 'Tacos', class: 'highlight'}
];

您可以编写逻辑以根据您的要求在某个时间间隔更新foods。

【讨论】：

【解决方案2】：

如果你想在几秒钟后重置选择框（你可能需要实现 import =>> { Observable, Subscription } from 'rxjs'; ）然后突出显示其他，请参考下面的代码：-

为了您的测试目的，请在您的 stackbliz 中进行以下替换，它运行良好，然后尝试添加您自己的逻辑以进一步实施。

    import {Component, ViewChild, OnInit} from '@angular/core';
    import { Observable, Subscription } from 'rxjs';
    /**
     * @title Basic select
     */
    @Component({
      selector: 'select-overview-example',
      templateUrl: 'select-overview-example.html',
      styleUrls: ['select-overview-example.css'],
    })
    export class SelectOverviewExample implements OnInit {
      @ViewChild('mySelect') mySelect;
    foods = [
      {value: 'steak-0', viewValue: 'Steak', class: 'highlight'},
      {value: 'pizza-1', viewValue: 'Pizza', class: ''},
      {value: 'tacos-2', viewValue: 'Tacos', class: 'highlight'}
    ];
      alive = true;
      selectedFood: any;
    ngOnInit() {
      this.selectedFood = this.foods[1];
    Observable.timer(0, (10000))
            .takeWhile(() => this.alive)
            .subscribe(() => {
                this.updateData();
            });
// PS: if you would like to stop resetting select box, you can assign **this.alive=false;** on a specific logic.
    }
    updateData() {
      console.log('updating data');
      this.foods = [
      {value: 'steak-0', viewValue: 'Steak', class: ''},
      {value: 'pizza-1', viewValue: 'Pizza', class: 'highlight'},
      {value: 'tacos-2', viewValue: 'Tacos', class: ''}
    ];
      this.selectedFood = this.foods[0];
      console.log(this.selectedFood);
    }
      click() {
        this.mySelect.open();
      }
    }


/**  Copyright 2017 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

/** No CSS for this example */
.highlight {
    background-color: red;
}

<mat-form-field>
  <mat-select [(ngModel)] = "selectedFood" #mySelect placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [ngClass]="food.class" [value]="food">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br>
<button (click)="click()">click</button>

<!-- Copyright 2017 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

【讨论】：