Question

因此，我第一次使用Angular 8（如果这不是菜鸟问题，很抱歉）为.Net Core后端创建UI，并且我有此对象

    {
    "tipoId": 1,
    "name": "Jato D'Agua",
    "operations": [
        {
            "operationId": 3,
            "name": "Desapertar",
            "descricao": "Serve para desapertar parafusos",
            "duracao": 5
        },
        {
            "operationId": 5,
            "name": "Apertar",
            "descricao": "Serve para apertar parafusos",
            "duracao": 5
        }
    ]
    }

我的机器类型声明如下：

export class TypeMachine {
  tipoId?: number;
  name: string;
  listOperation: Operation[];
}

由于用户可以使用多重选择（Here）修改操作列表，因此我已经可以显示所有可用的操作，但是我不知道如何使用其中的操作进行预选择对象TypeMachine。

我的HTML：

<mat-form-field>
    <mat-label>Operacoes</mat-label>
    <mat-select [formControl]="formArray" multiple>
    <mat-option *ngFor="let operacao of (operacoes$ | async)" [value]="operacao.id">
                                {{operacao.name}}</mat-option>
    </mat-select>
</mat-form-field>

我的component.ts看起来像这样

export class TipomaquinaAddEditComponent implements OnInit {
  operacoes$: Observable<Operation[]>;

  form: FormGroup;
  actionType: string;
  formName: string;
  formArray: Operation[];
  tipoId: number;
  errorMessage: any;
  existingTipo: TipoMaquina;

  constructor(
    private tipomaquinaService: TipomaquinaService,
    private formBuilder: FormBuilder,
    private avRoute: ActivatedRoute,
    private router: Router,
    private operacaoService: OperacaoService
  ) {
    const idParam = 'id';
    this.actionType = 'Add';
    this.formName = 'name';
    this.formArrayIds = number [];

    if (this.avRoute.snapshot.params[idParam]) {
      this.tipoId = this.avRoute.snapshot.params[idParam];
    }
  }

  ngOnInit() {
    if (this.tipoId > 0) {
      this.actionType = 'Edit';
      this.loadOperacoes();
      this.tipomaquinaService.getTipoMaquina(this.tipoId)
        .subscribe(
          data => (
            (this.existingTipo = data),
            this.form.controls[this.formName].setValue(data.name)
          )
        );
    }
  }

  save() {
    if (!this.form.valid) {
      return;
    }

    // if (this.actionType === 'Add') {
    //   const tipo: TipoMaquina = {
    //     name: this.form.get(this.formName).value,
    //     listOperacaoId: Array[]
    //   };

    //   this.tipomaquinaService.saveTipoMaquina(tipo).subscribe(data => {
    //     this.router.navigate(['/tipomaquina', data.tipoId]);
    //     this.router.navigate(['/tiposmaquina']);
    //   });
    // }

    if (this.actionType === 'Edit') {
      const tipo: TipoMaquina = {
        tipoId: this.existingTipo.tipoId,
        name: this.form.get(this.formName).value,
        listOperacao: this.form.get('operacoes').value
      };
      this.tipomaquinaService
        .updateTipoMaquina(tipo.tipoId, tipo)
        .subscribe(data => {
          this.router.navigate([this.router.url]);

          this.router.navigate(['/tiposmaquina']);
        });
    }
  }

  cancel() {
    this.router.navigate(['/tiposmaquina']);
  }

  get name() {
    return this.form.get(this.formName);
  }

  get operacoes() {
    return this.form.get('operacoes') as FormArray;
  }

  loadOperacoes() {
    this.operacoes$ = this.operacaoService.getOperacoes();
  }

}

做一个总结，我需要实现的是：

预选择多重选择器的条目
在用户保存更改后检索选定的条目。

我可以吗？

提前谢谢！

Answer 1

<mat-form-field>
   <mat-label>Select an option</mat-label>
   <mat-select [(value)]="selected">
   <mat-option>None</mat-option>
   <mat-option value="option1">Option 1</mat-option>
   <mat-option value="option2">Option 2</mat-option>
   <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

mat-select控件具有一个名为value的输入属性。创建一个名为selected的属性。如果使用的是FormControl，则需要在FormControl定义中绑定所选字段。然后，您可以使用formcontrol的setValue从代码进行设置。

如何使用预选值初始化下拉菜单？

1 个答案: