Javascript mat步进机不使用选择选项

我正在使用与垫步进机。我可以得到表单，但是步进器没有显示下拉列表

步进电机：

<form [formGroup]="form" (ngSubmit)="submit()">
  <mat-horizontal-stepper>
    <mat-step *ngFor="let step of steps; let index = index; let last = last;">
      <ng-template matStepLabel>{{ step.label }}</ng-template>
      <formly-form [form]="form.at(index)" [model]="model" [fields]="step.fields" [options]="options[index]">
      </formly-form>

      <div>
        <button *ngIf="index !== 0" matStepperPrevious class="btn btn-primary" type="button"
          (click)="prevStep(index)">Back</button>
        <button *ngIf="!last" matStepperNext class="btn btn-primary" type="button" [disabled]="!form.at(index).valid"
          (click)="nextStep(index)">Next</button>
        <button *ngIf="last" class="btn btn-primary" [disabled]="!form.valid" type="submit">Submit</button>
      </div>
    </mat-step>
  </mat-horizontal-stepper>
</form>

{{step.label}
返回
下一个
提交

代码：

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormArray，FormGroup}；
从'@ngx formly/core'导入{FormlyFormOptions，FormlyFieldConfig}；
导出接口StepType{
标签：字符串；
字段：FormlyFieldConfig[]；
}
@组成部分({
选择器：“应用程序步骤配置文件”，
templateUrl:'./step profile.component.html'，
样式URL:['./步骤配置文件.component.css']
})
导出类StepProfileComponent实现OnInit{
activedStep=0；
模型={}；
步骤：步骤类型[]=[
{
标签：“详细信息”，
字段：[
{
键：“somekey”，
键入：“选择”，
模板选项：{
标签：“标签”，
选项：[
{名称：'铁人'，值：'铁人'}，
{姓名：'美国船长'，价值：'美国船长'}，
{名称：'黑寡妇'，值：'黑寡妇'}，
{name:'Hulk'，value:'Hulk'}，
{姓名：'惊奇船长'，价值：'惊奇船长'}
]
}
}
]
}
];
form=newformarray（this.steps.map（（）=>newformgroup（{}））；
options=this.steps.map（（）=>{}）；
构造函数（）{}
恩戈尼尼特（）{
}
前步骤（步骤）{
this.activedStep=步骤-1；
}
下一步（步骤）{
this.activedStep=步骤+1；
}
提交（）{
警报（JSON.stringify（this.model））；
}
}

我通过以下操作实现了这一点：

     {
        key: 'something',
        type: 'select',
        defaultValue: "hulk",
        templateOptions: {
          label: 'label',
          options: [
            { name: 'Iron Man', value: 'iron_man' },
            { name: 'Captain America', value: 'captain_america' },
            { name: 'Black Widow', value: 'black_widow' },
            { name: 'Hulk', value: 'hulk' },
            { name: 'Captain Marvel', value: 'captain_marvel' }
          ],
          labelProp: "name",
          valueProp: "value"
        }
    }

---

看起来您只需要添加labelProp和valueProp属性

在stackblitz中发布一段实时代码片段可能会有所帮助

     {
        key: 'something',
        type: 'select',
        defaultValue: "hulk",
        templateOptions: {
          label: 'label',
          options: [
            { name: 'Iron Man', value: 'iron_man' },
            { name: 'Captain America', value: 'captain_america' },
            { name: 'Black Widow', value: 'black_widow' },
            { name: 'Hulk', value: 'hulk' },
            { name: 'Captain Marvel', value: 'captain_marvel' }
          ],
          labelProp: "name",
          valueProp: "value"
        }
    }