如何设置材料步进器默认打开第二项并设置图标颜色？（Angular Material）

Posted 2023-05-07

【中文标题】如何设置材料步进器默认打开第二项并设置图标颜色？（Angular Material）

【英文标题】：How to set material stepper to open second item by default and set the icon color?(Angular Material)

【发布时间】：2019-09-13 20:00:18

【问题描述】：

我使用垂直材料步进器，我想默认打开第二个项目。现在它打开第一个项目。我想默认打开“填写您的地址”。为此，我使用了 Material Angular。因此，当我打开应用程序时，我想打开第二个项目并更改图标颜色。我附上了代码。我将不胜感激。

html:

<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  !isLinear ? 'Enable linear mode' : 'Disable linear mode'
</button>
<mat-vertical-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
      <mat-form-field>
        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>
</mat-vertical-stepper>

TS：

import Component, OnInit from '@angular/core';
import FormBuilder, FormGroup, Validators from '@angular/forms';

/**
 * @title Stepper vertical
 */
@Component(
  selector: 'stepper-vertical-example',
  templateUrl: 'stepper-vertical-example.html',
  styleUrls: ['stepper-vertical-example.css']
)
export class StepperVerticalExample implements OnInit 
  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) 

  ngOnInit() 
    this.firstFormGroup = this._formBuilder.group(
      firstCtrl: ['', Validators.required]
    );
    this.secondFormGroup = this._formBuilder.group(
      secondCtrl: ['', Validators.required]
    );
  

【参考方案1】：

在步进器上将 selectedIndex 设置为 1

html代码

 <mat-horizontal-stepper  #stepper [selectedIndex]="1" (selectionChange)="stepChange($event)">
         <!-- Your code -->
 </mat-horizontal-stepper>

ts 代码

public selectedIndex: number;
public iconColor: stirng;
stepChange(event)
    this.selectedIndex= event.selectedIndex;
    if(event.selectedIndex === 0)
        this.iconColor = 'your color';
    

或者

在你想设置颜色的html中，你可以这样做

<mat-icon [color]="selectedIndex === 0 ? 'primary' : 'warn'"></mat-icon>

或者

<mat-icon [color]="getColor()"></mat-icon>



 getColor()
    return selectedIndex === 0 ? 'primary' : 'warn'
 

【讨论】：

我更新了问题。我也可以更改默认打开项目的背景图标颜色吗？

如何在打字稿中设置这个并为图标添加颜色？

您好！我把这个问题***.com/questions/55936137/… 放在这里。你能帮帮我吗？

@AndreiGhervan 用于在打字稿中设置颜色，您可以创建一个函数并使用它来代替。我已经更新了我的答案。