Question

我可以从动态创建的多个选择元素中获取值吗？我有固定的产品类别，打算从API动态加载。这些类别中的每一个类别都有一个包含我希望能够选择的选项的数组。我一直坚持下去，我无法检索选择的值，最近我读到一句话，说我们无法从使用角材料动态创建的选择中获得选择的值。是真的吗？

我尝试使用jQuery通过id获取元素，并尝试了多种获取所选值的方法。

在我未显示的菜单服务上，我打印form.values，但它为空。它应包含选定的选项，或者opcEscolhidas数组应包含选定的值。

这是我的模板：

<div id="main" class="row">
  <h2>Selecione os itens do Cardápio</h2>

  <form (submit)="onCreateMenu(form)" #form="ngForm" id="items-form">
    <ul class="collapsible" data-collapsible="accordion"> 
      <li *ngFor="let categoria of categorias">
        <div class="collapsible-header">{{categoria.nome}}</div>
        <div class="collapsible-body">
          <div class="opGroup">
            <mat-form-field>
              <mat-label>{{categoria.nome}}</mat-label>
              <mat-select ([value])="opcEscolhidas" multiple>
                <mat-option *ngFor="let opcao of categoria.opcoes" [value]="opcao">{{opcao}}</mat-option>
              </mat-select>
            </mat-form-field>                   
          </div>
        </div>
      </li>
    </ul>
    <button type="submit" class="btn">Montar Cardápio</button>
  </form>
</div>

这是我的组件：

import { Component, OnInit } from '@angular/core';
// import * as $ from 'jquery';
import { FormControl } from '@angular/forms';
import { MenuService } from '../menu.service';
import { NgForm } from '@angular/forms';



@Component({
  selector: 'app-create-menu',
  templateUrl: './create-menu.component.html',
  styleUrls: ['./create-menu.component.css']
})
export class CreateMenuComponent implements OnInit {
  // feijao = "";
  // arroz = "";
  // macarrao = "";
  // carne = "";
  // acomp = "";
  // salada = "";

  opcEscolhidas = [];

  categorias = [
    {
      "id":1,
      "nome":"Feijão",
      "opcoes": ["Carioca", "Preto", "Verde", "Macassa"]
    },
    {
      "id":2,
      "nome":"Arroz",
      "opcoes": ["Branco", "Refogado", "Integral"]
    },
    {
      "id":3,
      "nome":"Macarrão",
      "opcoes": ["Alho e Óleo", "Molho de tomate", "Manteiga e 
cebola", "Molho branco"]
    },
    {
      "id":4,
      "nome":"Carne",
      "opcoes": ["Bisteca/porco", "Carne de sol", "Peito de 
 frango", "Coxa de frango"]
    },
    {
      "id":5,
      "nome":"Acompanhamentos",
      "opcoes": ["Purê", "Farofa", "Vinagrete", "Batata frita"]
    },
    {
      "id":6,
      "nome":"Salada",
      "opcoes": ["Alface", "Tomate", "Rúcula", "Repolho"]
    }
  ];

  public menuService;

  constructor(menuService: MenuService) { 
    this.menuService = menuService;
  }

  ngOnInit() {
  }

  onCreateMenu(form: NgForm) {
    this.menuService.createMenu(form);
  }

在我未显示的菜单服务上，我打印form.values，但它为空，并且应包含所选选项。或我的“ opcEscolhidas”数组应包含所选值。强文本

Answer 1

您需要将ngModel绑定到控件。观看这段视频，

https://www.youtube.com/watch?v=hAaoPOx_oIw

Answer 2

尝试

<select
                      class="custom-select"
                      name="overallRating"
                      [ngModel]="inspectionGeneralInfo?.OverallRating">
                      <option [value]="-1">
                        Select a rating
                      </option>
                      <option 
                        *ngFor="let orc of inspectionGeneralInfo?.OverallRatingChoices"
                         [value]="orc.AnswerCode">
                        {{orc.AnswerDescription}}
                      </option>
              </select>

我可以从动态创建的多个选择元素中获取值吗？

2 个答案: