[英]Angular Material Stepper 'Paginate'
我的步进器中有很多步骤,所以我想把它分成两部分,即
当用户进入向导时,步进器标题仅显示 1--2--3--4,然后,当第 4 步完成后,用户进入第 5 步,标题显示 5--6--7-- 8,依此类推进行下一步。
你知道有什么方法可以做到这一点吗?
提前致谢。
编辑:
我尝试使用*ngIf
来隐藏/取消隐藏步骤,但它确实从步进器数组中删除了这些步骤,因此在步骤隐藏时输入的信息会丢失。
这是我的 *ngIf 方法: https ://stackblitz.com/edit/angular-material2-beta-kknvx9
另外,用[hidden]
尝试了类似的方法,但它根本不起作用。
问题是mat-step
在呈现时更改为mat-step-header
并且其上的任何自定义类或属性都将消失。
以下代码有效,但很混乱。 最好的解决方案是找到另一个具有您需要的向导组件,或者在 GitHub 上向 Material 开发人员提交请求,以在mat-step
添加隐藏标志。
班级:
export class AppComponent implements OnInit, AfterViewInit{
private ngVersion: string = VERSION.full;
MAX_STEP = 7;
@ViewChild('stepper') private myStepper: MatStepper;
step: number = 0;
page:number = 0;
constructor() {}
ngOnInit() {}
ngAfterViewInit() {
this.rerender();
}
goBack() {
if (this.step > 0) {
this.step--;
this.myStepper.previous();
}
this.page = this.step > 3 ? 1 : 0;
this.rerender();
}
goForward() {
if(this.step < this.MAX_STEP) {
this.step++;
this.myStepper.next();
}
this.page = this.step > 3 ? 1 : 0;
this.rerender()
}
private rerender() {
let headers = document.getElementsByTagName('mat-step-header');
let lines = document.getElementsByClassName('mat-stepper-horizontal-line');
for (let h of headers) {
if (this.page === 0) {
if (Number.parseInt(h.getAttribute('ng-reflect-index')) > 3) {
h.style.display = 'none';
}
else {
h.style.display = 'flex';
}
}
else if (this.page === 1) {
if (Number.parseInt(h.getAttribute('ng-reflect-index')) < 4) {
h.style.display = 'none';
}
else {
h.style.display = 'flex';
}
}
}
for (let i = 0; i < lines.length; i++) {
if (this.page === 0) {
if (i > 2) {
lines[i].style.display = 'none';
}
else {
lines[i].style.display = 'block';
}
}
else if (this.page === 1) {
if (i < 4) {
lines[i].style.display = 'none';
}
else {
lines[i].style.display = 'block';
}
}
}
}
}
看法:
<div class="solution">
<!--------------------------------------------------------------------------------------->
<mat-horizontal-stepper #stepper>
<mat-step>
Step 1
</mat-step>
<mat-step>
Step 2
<input matInput placeholder="Address" required>
</mat-step>
<mat-step>
Step 3
</mat-step>
<mat-step>
Step 4
</mat-step>
<mat-step>
Step 5
</mat-step>
<mat-step>
Step 6
<input matInput placeholder="Address" required>
</mat-step>
<mat-step>
Step 7
</mat-step>
<mat-step>
Step 8
</mat-step>
<!-- one option -->
</mat-horizontal-stepper>
<!-- second option -->
<div>
<button (click)="goBack()" type="button" [hidden]="step === 0">Back</button>
<button (click)="goForward()" type="button" [hidden]="step === MAX_STEP">Next</button>
</div>
<!--------------------------------------------------------------------------------------->
Step: {{step}}
<br>
Page: {{page}}
</div>
我最近正在研究类似的问题,并从这个答案https://stackoverflow.com/a/59563396/14256240 by Sasan 中获得了一些参考,我试图编写一个更通用的代码版本。 通过考虑我们要随时显示的步骤的最小和最大索引,我在步进器中添加了一个分页选项。 在此范围内不遵循的其余步骤显示为“无”。
你可以在这里参考 stackblitz: https ://stackblitz.com/edit/angular-mat-stepper-paginator?file = src/app/stepper-paginator1/stepper-paginator1.component.ts
如果您对更详细的解释感兴趣,可以在这里查看我的博客: https : //madhura-gore.medium.com/angular-material-stepper-with-pagination-b9e1b091b8f6
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.