Angular Material Stepper 自定义图标 ng-template 具有未定义的上下文变量

问题描述

我正在尝试使用带有 ng-template 属性的 matStepperIcon 来覆盖默认的 Angular Material 的 matStepper 图标。我还想传递一些数据，我尝试使用 ng-container 和 *ngTemplateOutlet，但它只能部分起作用。

正如您从以下代码中看到的，我希望 print 函数始终打印定义的值，但是，在正确打印步骤的七个 ID 后，它会打印 undefined 七次。为什么会这样，我该如何防止这种情况发生？

<mat-horizontal-stepper labelPosition="bottom">
  <ng-container *ngFor="let step of form.steps">
    <ng-template #ref let-step="id" matStepperIcon="edit">
      <mat-icon>clear</mat-icon>
      {{ print(step) }}
    </ng-template>
    
    <ng-template #ref let-step="id" matStepperIcon="number">
      <mat-icon>clear</mat-icon>
      {{ print(step) }}
    </ng-template>

    <ng-template #ref let-step="id" matStepperIcon="done">
      <mat-icon>clear</mat-icon>
      {{ print(step) }}
    </ng-template>
    
    <ng-container *ngTemplateOutlet="ref; context: step"></ng-container>

    <mat-step>
      <ng-template matStepLabel>
        {{ step.id }}:
        {{ translateService.currentLang === "it" ? step.name : step.nameEn }}
      </ng-template>

      <!-- Step content-->
      </mat-step>
  </ng-container>
</mat-horizontal-stepper>

Link to StackBlitz example

另一方面，将我的代码更改为以下内容会导致 print 函数打印所有正确的 ID，但它还会打印 8 次最后一步的 ID。

<mat-horizontal-stepper labelPosition="bottom">
  <ng-container *ngFor="let step of form.steps">
    <ng-template #ref matStepperIcon="edit">
      {{ print(step.id) }}
      <mat-icon>clear</mat-icon>
    </ng-template>

    <ng-template #ref matStepperIcon="number">
      {{ print(step.id) }}
      <mat-icon>clear</mat-icon>
    </ng-template>

    <ng-template #ref matStepperIcon="done">
      {{ print(step.id) }}
      <mat-icon>clear</mat-icon>
    </ng-template>

    <ng-container *ngTemplateOutlet="ref; context: step"></ng-container>

    <mat-step>
      <ng-template matStepLabel>
        {{ step.id }}:
        {{ translateService.currentLang === "it" ? step.name : step.nameEn }}
      </ng-template>

      <!-- Step content-->
    </mat-step>
  </ng-container>
</mat-horizontal-stepper>

解决方法

如果你想在 MatStepper 中使用自定义图标，你应该做几件事：

• 教图书馆考虑你的图标集。

我们可以像禁用displayDefaultIndicatorType

providers: [{
   provide: STEPPER_GLOBAL_OPTIONS,useValue: {displayDefaultIndicatorType: false}
}]

但这无济于事，因为 Angular Material 已预定义逻辑以根据内部步骤状态显示特定图标 https://github.com/angular/components/blob/28c36f8a02f72e51a4d6c6a797e2f913e5dede9b/src/cdk/stepper/stepper.ts#L442-L465

因此，您可以像此处一样覆盖基本逻辑https://github.com/angular/components/issues/18307

@ViewChild(MatHorizontalStepper,{ static: true }) stepper: MatHorizontalStepper;

ngOnInit() {
  this.stepper._getIndicatorType = (i,state) => state || 'number';
}

• 根据步骤决定显示哪个图标

  <mat-step [state]="step.state">
  
  
  steps: [
    {
      id: 218,name: 'Dati richiedente',nameEn: 'Applicant data',state: 'home',},{
      id: 219,name: 'Richiesta Meeting',nameEn: 'Meeting request',state: 'edit'
    },

• 使用内置的 matStepperIcon 上下文访问渲染 index。使用此索引，您可以访问相应的 step:

  <ng-template let-i="index" matStepperIcon="home">
    <mat-icon>home</mat-icon>
    {{ print(form.steps[i]) }}
  </ng-template>
  

Forked Stackblitz

,

我不确定为什么会发生这种情况，但您可以通过使用绑定方法来解决

init

Working Example

,

你的标记是错误的，我不明白它应该是什么样子，但发现了 3 个错误：

• 不能有 3 个相同的模板引用。
  
• 此外，您还应该在 *ngFor 循环之外定义模板。
  
• 最后 - 要向模板提供一些数据，您应该将其定义为具有 $implicit 键的对象。
  

Here is stackblitz with changes