首页 文章

mat-stepper没有在mat-dialog中显示

提问于
浏览
0

我的mat-stepper在家用组件中工作正常 . 我希望它在一个对话框中打开,所以我将所有代码放在mat-dialog组件中,但之后它没有在 <mat-horizontal-stepper>...</mat-horizontal-stepper> 中显示任何内容 .
我的对话框组件是

<h2 mat-dialog-title>Add Distributor <button mat-dialog-close style="float:right">X</button></h2>

<mat-dialog-content>
  Hello

  <mat-horizontal-stepper [linear]="true" #stepper="matHorizontalStepper" *ngIf="isAddNewDistributorClicked">
    <mat-step [stepControl]="firstFormGroupDistributor">
      <form [formGroup]="firstFormGroupDistributor">
        <ng-template matStepLabel>Identification</ng-template>
        <mat-form-field>
          <input matInput placeholder="Distributor's Name" formControlName="distributor_name" required >
        </mat-form-field>
        <br>
        <label>Registered On</label>
        <mat-radio-group formControlName="distributor_identification_type" [(ngModel)]="distributor_identification_type" [ngModelOptions]="{standalone: true}"  (change)="distributor_identification_type_changed()" >
          <mat-radio-button value="VAT">VAT </mat-radio-button>
          <mat-radio-button value="PAN">PAN</mat-radio-button>
        </mat-radio-group>
        <br>
        <mat-form-field *ngIf="distributor_identification_type=='VAT'">
          <input matInput placeholder="VAT Registration Number" formControlName="distributor_VAT" type="number" >
        </mat-form-field>
        <mat-form-field *ngIf="distributor_identification_type=='PAN'">
          <input matInput placeholder="PAN Registration Number" formControlName="distributor_PAN" type="number" >
        </mat-form-field>
        <div>
          <button mat-raised-button color="primary" matStepperNext [disabled]="!firstFormGroupDistributor.valid">Next</button>
          <button mat-raised-button color="warn" (click)="onAddNewDistributorCancelled()" style="float:right">Cancel</button>
        </div>
      </form>
    </mat-step>
  </mat-horizontal-stepper>
</mat-dialog-content>

我已经删除了mat-horizontal-stepper中的一些代码,因为stackoverflow告诉我我已经发布了很多代码而不是描述 . 但是这些代码在我的home.component中正常工作 . 我只是想在对话框中显示它,但现在它只显示这个

screenshot

为什么会这样?

虽然通过 ng test karma测试说

Failed: Template parse errors:
Can't bind to 'linear' since it isn't a known property of 'mat-horizontal-stepper'.
1. If 'mat-horizontal-stepper' is an Angular component and it has 'linear' input, then verify that it is part of this module.
2. If 'mat-horizontal-stepper' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. .

然后它对所有的 property 说 .
NO_ERRORS_SCHEMA 已经在我的app.module中了..我添加了 CUSTOM_ELEMENTS_SCHEMA 也没有效果

我的dialog.module.ts是

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
selector: 'app-add-distributor-dialog',
templateUrl: './add-distributor-dialog.component.html',
styleUrls: ['./add-distributor-dialog.component.css']
})
export class AddDistributorDialogComponent implements OnInit {

    constructor(public dialogRef: MatDialogRef<AddDistributorDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

    ngOnInit() {
    }
    onNoClick(): void {
        this.dialogRef.close();
    }
}

1 回答

  • 0

    这是因为mat-horizontal-stepper风格 . 请尝试以下风格 .

    :host ::ng-deep {
      .mat-horizontal-stepper-header-container {
        position: inherit;
      }
    }
    

相关问题