Javascript 生成的多选角度的ng的默认选定值？

我需要为multi-select设置默认选定值

我尝试初始化ngModel以绑定变量，并使用了

[selected]=“selectedSegment=='S1'

。他们都不是为我工作的

{{segMap[segment]}

只需要列表中的第一项作为默认选择值。

假设您有

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

这很简单，只要设定好

selectedSegments = [0, 2];

---

然后将选择“a”、“c”。

您可以在索引上使用选定的属性，但使用：

---

只需将ngModel设置为默认值

假设segmentsToDisplay有元素=['s1'，'s2'，'s3']

---

然后，您的ngModel应该是selectedSegments=['s1']

尝试此操作-默认选定值集

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>

从“@angular/core”导入{Component，OnInit}；
从“@angular/forms”导入{FormGroup，FormArray，FormControl，FormBuilder，Validators，NgForm}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent实现OnInit{
blogForm:FormGroup；
构造函数（私有fb:FormBuilder）{}
技术：任何[]=[
{ID:“1”，Name:“Angular”}，
{ID:“2”，Name:“Html”}，
{ID:“3”，名称：“Nodejs”}，
{ID:“4”，名称：“React”}
];
DefaultSelectedArray:任意[]=[
{ID:“1”，Name:“Angular”}，
{ID:“3”，名称：“Nodejs”}
];
恩戈尼尼特（）{
这个.isBuildForm（）；
此参数为.setDefaultValues（）；
}
setDefaultValues（）{
设valueArray=[]；
this.DefaultSelectedArray.forEach（元素=>{
valueArray.push（element.ID）；
});
this.blogForm.controls.Name.setValue（valueArray）；
}
isBuildForm（）{
this.blogForm=this.fb.group({
名称：[“”，验证器。必需]
});
}
}
{{Technology[i].Name}
{{blogForm.value | json}}

---

selectedSegments是一个字符串数组，segmentsToDisplay有两个项目“S1”和“S2”，我用代码试过了，效果很好。检查一下，让我知道。您是如何设置ngModel值的？感谢它的工作，我必须在多个地方初始化。非常感谢。太好了，欢迎：）

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>