Angular Material step自定义图标ng-template有未定义的上下文变量 &g

Question

我试图使用matStepperIcon属性的ng-template来覆盖默认的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>

链接到StackBlitz示例

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

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

Answer 1

如果你想在matstep中使用自定义图标，你应该做以下几件事:

• 教库考虑你的图标集。

我们可以像

那样禁用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>
  

叉形Stackblitz

Answer 2

我不知道为什么会发生，但你可以通过使用bind方法解决

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

工作示例

Answer 3

你的标记是错误的，我没有得到它应该是什么样子，但发现3个错误:

• 你不能有3个相同的模板参考。
  
你也应该在*ngFor之外定义你的模板循环。
最后-为模板提供一些数据，您应该使用$implicit将其定义为对象。关键。

这是修改后的stackblitz