Question

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

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

我不能做的是我自动选择与这条街相对应的街区，例如，它看起来应该像这样：

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() {}
}

有什么想法吗？

Answer 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);
}

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

1 个答案: