Question

我有一个通过open（）方法打开的选项列表，但我也希望每隔几秒钟通过列表（即背景：突出显示的选项上的红色）进行迭代和突出显示并循环显示它。这可能吗？

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

Answer 1

动态更新您的选项的类，并将其分配到mat-option as：

<强> 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。

Answer 2

如果您想在几秒钟后重置选择框（您可能需要从'rxjs'实施import =＆gt;＆gt; {Observable，Subscription}; ）然后突出显示其他人，请参阅下面代码： -

为了您的测试目的，请在 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 -->

Angular2材质：迭代选择选项

2 个答案: