mat-stepper не отображается в mat-диалоге - PullRequest
Новая
       8

mat-stepper не отображается в mat-диалоге

0 голосов
/ 26 апреля 2018

Мой мат-степпер работал нормально, когда он был в домашнем компоненте. Я хотел, чтобы он открылся в диалоговом окне, поэтому я поместил все коды внутри компонента 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 карма говорит 

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

тогда он говорит всем свойствам.
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 голосов
/ 16 августа 2018

это из-за стиля коврик-горизонтальный-шаговый. пожалуйста, попробуйте следующий стиль. 

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