如何根据角度 7 中的某些值默认检查特定复选框

Question

我有一个复选框和选择框，其值来自循环，但在这里我需要根据对象数组默认检查一些复选框。这里复选框和选择框值来自 usersg 和 usersr 变量。但是选中并且默认选择应该来自 ngOnInit() 中的变量 usersg_checked 和 usersr_selected。下面是代码

home.component.html

<p *ngFor="let group of usersg"><input type="checkbox" checked="checked.id" value="{{group.id}}" />{{group.name}}</p>

<p><select><option *ngFor="let role of usersr" value="{{role.id}}">{{role.name}}</option></select></p>

home.component.html

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    submitted = false;
    usersg_checked:any;
    usersr_selected:any;

 constructor(private formBuilder: FormBuilder) {


     }
public usersg = [{"id":1,"name":"test1"},{"id":2,"name":"test2"},{"id":3,"name":"test3"},{"id":4,"name":"test4"}];

public usersr = [{"id":1,"name":"test1"},{"id":2,"name":"test2"}];


  ngOnInit() {
this.usersg_checked = [{"id":1,"name":"test1"},{"id":2,"name":"test2"}];

this.usersr_selected = [{"id":1,"name":"test1"}];


  }


}

Answer 1

在组件中添加isChecked()方法来检查是否必须选中复选框。

组件：

isChecked(id) {
  return this.usersg_checked.some(item => item.id === id);
}

模板：

<p *ngFor="let group of usersg">
  <input type="checkbox" [checked]="isChecked(group.id)" value="{{group.id}}" />{{group.name}}
</p>

对于<select> 元素最好使用[(ngModel)]。

模板：

<p><select [(ngModel)]="usersr_selected.id">
   <option *ngFor="let role of usersr" value="{{role.id}}">{{role.name}}</option> 
</select></p>

组件：

并将usersr_selected 更改为一个对象。

ngOnInit() {
  this.usersr_selected = {"id":1,"name":"test1"};
}  

如果usersr_selected 是一个数组，则使用数组的第一个元素作为NgModel。

ngOnInit() {
  this.usersr_selected = this.usersr_selected[0];
}