angular - 角材料步进器“分页”
问题描述
我的步进器中有很多步骤,所以我想把它分成两部分,即
当用户进入向导时,步进器标题仅显示 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>
推荐阅读
- c# - WCF 与 EntityFramework -“System.ServiceModel.CommunicationException”
- centos - 无法使用 Opscenter 连接到 Cassandras 默认集群(测试集群)
- php - 如何将两个图像取消链接在一起?
- node.js - 您的全局 Angular CLI 版本 (6.0.8) 高于本地版本 (1.0.2)
- java - Android Studio 格式主题错误
- java - 来自 Json 的解析列表
- c++ - 用父类实例化的向下转型对象
- sapui5 - SAPUI5模型排序器按多列排序响应表
- javascript - 从 js UDF 输出 INT64
- api - Arangodb 更改默认 foxx 服务路径