如果在Angular中使用stepper表单时,程序化设置值后无效,可以尝试以下解决方法:
import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements AfterViewInit {
@ViewChild(MatStepper) stepper: MatStepper;
ngAfterViewInit() {
this.stepper.selectedIndex = 1; // 设置要激活的步骤索引
}
}
import { Component, NgZone, ViewChild } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
@ViewChild(MatStepper) stepper: MatStepper;
constructor(private ngZone: NgZone) {}
setValue() {
this.ngZone.run(() => {
this.stepper.selectedIndex = 1; // 设置要激活的步骤索引
});
}
}
import { Component, ViewChild } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
@ViewChild(MatStepper) stepper: MatStepper;
setValue() {
setTimeout(() => {
this.stepper.selectedIndex = 1; // 设置要激活的步骤索引
}, 0);
}
}
希望以上解决方法能够帮助您解决Angular stepper表单在程序化设置值后无效的问题。