ng-for 在 Angular 中生成的多選的默認選擇值？

Question

我需要為多選設置默認選定值。

我嘗試初始化 ngModel 以綁定變量，並且還使用了[selected] = "selectedSegment == 'S1'" 。 他們都不為我工作

<select 
    class="form-control" 
    multiple 
    [(ngModel)]="selectedSegments" 
    name="segment_select"
    (change)="onChangeSegment()"
>
    <option *ngFor="let segment of segmentsToDisplay; let segIndex = index;" [ngValue]="segment">{{ segMap[segment] }}</option>
</select>

只需要將列表中的第一項作為默認選定值。

Answer 1

假設你有

segmentsTodisplay = [0, 1, 2];
segMap = ['a', 'b', 'c'];

設置很簡單

selectedSegments = [0, 2];

然后將選擇“a”、“c”。

Answer 2

您可以在索引上使用 selected 屬性，但使用'selected' 作為值：

<option [selected]="segIndex === 0 ? 'selected' : null "></option>

Answer 3

只需將您的 ngModel 設置為默認值。

假設 segmentToDisplay 有元素 = ['s1', 's2', 's3' ];

那么你的 ngModel 應該是 selectedSegments= ['s1'];

Answer 4

試試這個 - Angular 反應 forms 默認選擇值設置

import { Component, OnInit } from "@angular/core";
import {FormGroup,FormArray,FormControl,FormBuilder,Validators, NgForm } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  blogForm: FormGroup;
  constructor(private fb: FormBuilder) {}

  Technology: any[] = [
    { ID: "1", Name: "Angular" },
    { ID: "2", Name: "Html" },
    { ID: "3", Name: "Nodejs" },
    { ID: "4", Name: "React" }
  ];

  DefaultSelectedArray: any[] = [
    { ID: "1", Name: "Angular" },
    { ID: "3", Name: "Nodejs" }
  ];

  ngOnInit() {
    this.isBuildForm();
    this.setDefaultValues();
  }

  setDefaultValues() {
    let valueArray = [];
    this.DefaultSelectedArray.forEach(element => {
      valueArray.push(element.ID);
    });
    this.blogForm.controls.Name.setValue(valueArray);
  }

  isBuildForm() {
    this.blogForm = this.fb.group({
      Name: ["", Validators.required]
    });
  }
}





<form [formGroup]="blogForm" (ngSubmit)="onSubmit(blogForm.value)" novalidate="novalidate" autocomplete="off">
    <select multiple class="form-control"  formControlName="Name">
       <option *ngFor="let option of Technology; let i = index" [value]="Technology[i].ID" [text]="Technology[i].Name" >
                {{ Technology[i].Name }}
        </option>
  </select>

</form>

<pre>{{blogForm.value| json}}</pre>