如何设置默认值以选择多个答案

【问题标题】：How set default values to select multiple如何设置默认值以选择多个
【发布时间】：2026-01-18 13:15:02
【问题描述】：

我有一个表格，用于存储街道及其各自的社区：

如果我尝试编辑，我会按下网格上的一个按钮并显示街道数据：

我不能自动选择街道对应的街区，例如应该是这样的：

HTML：

                    <form [formGroup]="frmCalle">

                    <div class="form-group">
                        <label>NOMBRE*</label>
                        <input matInput id="txtCalle" formControlName="nombre" [(ngModel)]="inputCalle" type="text" class="form-control inputAbm" placeholder="Ingrese nombre de Calle">
                        <button *ngIf="inputCalle !== ''" mat-button (click)="resetForm('calle')" matSuffix mat-icon-button aria-label="Clear" matTooltip="Borrar texto">
                            <i class="material-icons">clear</i>
                        </button>

                        <br><br>

                        <label>BARRIO</label><br>
                        <mat-select formControlName="barrio" class="form-control inputAbm" [(ngModel)]="selectBar" placeholder="Seleccione Barrio" multiple>
                            <mat-option *ngFor="let item of arrBarrio" [value]="item.bar_IDBarrio">{{ item.bar_nombre }}</mat-option>
                        </mat-select>
                        <button *ngIf="selectBar !== ''" mat-button (click)="resetForm('barrio')" matSuffix mat-icon-button aria-label="Clear" matTooltip="Borrar texto">
                            <i class="material-icons">clear</i>
                        </button>
                    </div>
                    <div class="form-group">
                        <div class="form-row">
                            <div class="col-md-8">
                                <button id="btnClear" (click)="registrarCalle(boBand)" [disabled]="!frmCalle.valid" class="btn btn-block btnPrimario myBtnCard">
                                    Guardar
                                </button>
                            </div>
                            <div class="col-md-4">
                                <button (click)="resetForm('')" mat-mini-fab class="btnFiltro" class="btnLimpiar" matTooltip="Limpiar campos" matTooltipPosition="left"><i class="material-icons">clear</i></button>
                            </div>
                        </div>
                    </div>

                </form>

TS：

mostrarDataCalle(stCalle: string) {
this.inputCalle = stCalle;

const objCalle = {
  cal_nombre: stCalle
};

// HERE I BRING ALL THE NEIGHBORHOODS FROM DATABASE
this.reclamoService.selectBarrioPorCalle(objCalle).subscribe(data => {
  this.arrBarrio.forEach(element => {
    // HERE YOU SHOULD GO THROUGH THE SELECT AND SELECT THE CORRESPONDING NEIGHBORHOODS
  });
});
}

实体：

export class Barrio {
   bar_IDBarrio: number;
   bar_nombre: string;
   constructor() {}
}

知道怎么做吗？

【问题讨论】：

有一些代码会很棒，甚至是minimal reproducible example。我个人不能帮助你。请提供您的组件、模板、模型...
嗨@Maryannah！请原谅我的笨拙，在那里添加更多代码
您已经将您的选择绑定到selectBar，因此您只需为其分配值。
嗨 @jcruz，selectBar 被分配了 JSON.parse(data)，它返回街道的邻域并且不起作用

标签： angular typescript angular-material multiple-select

【解决方案1】：

用值创建一个数组并使用 setValue 设置选定的值

valuesToSelect = [];
mostrarDataCalle(stCalle: string) {
this.inputCalle = stCalle;

const objCalle = {
   cal_nombre: stCalle
 };

this.reclamoService.selectBarrioPorCalle(objCalle).subscribe(data => {
  this.arrBarrio.forEach(element => {
    // HERE YOU SHOULD GO THROUGH THE SELECT AND SELECT THE CORRESPONDING 
NEIGHBORHOODS
 element.forEach( x => this.valuesToSelect.push(x) )
 });
});
   this.frmCalle.get('barrio').setValue(this.valuesToSelect);
}

【讨论】：