Question

我的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中正常工作。我只是想在一个对话框中显示它，但现在它只显示了这个

为什么会这样？

通过ng test进行测试业力说

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. .

然后它对所有的财产说我的app.module中已经存在NO_ERRORS_SCHEMA ..我已添加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();
    }
}

Answer 1

这是由于水平垫板式的。请尝试遵循以下样式。

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

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

1 个答案: