html - Kako zadano označiti određene potvrdne okvire na temelju nekih vrijednosti u Angularu 7

Imam checkboxove i selectbox čije vrijednosti dolaze iz petlje, ali ovdje trebam da neki checkboxovi budu označeni po defaultu na temelju niza objekata. Vrijednosti checkboxa i selectboxa dolaze iz varijabli usersg i usersr. Ali označeno i odabrano po defaultu treba biti iz varijabli usersg_checked i usersr_selected unutar ngOnInit(). Evo koda ispod

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"}];


  }


}

Odgovor #1

Dodajte metodu isChecked() u komponentu kako biste provjerili treba li okvir za potvrdu biti odabran.

Komponenta:

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

Predložak:

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

Za <select> elemente bolje je koristiti [(ngModel)].

Predložak:

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

Komponenta:

I promijenite usersr_selected u objekt.

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

Ako je usersr_selected niz, upotrijebite prvi element niza kao NgModel.

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