Fazendo um array de selects utilizando multi-select, mas os select não estou se comunicando, quando eu seleciono um aparece no json, mas quando eu vou selecionar outro subscreve aqueles que eu selecionei.Estou utilizando Angular 4.
Segue o link abaixo para testar a função.
Staackblitz: https://stackblitz.com/edit/angular-tjgycw?file=src/app/app.component.html
JSON
Component
colecaoGrupoPermissoes: ColecaoGrupoPermissao[];
this.perfilAcessoService.findAllPermissoes()
.subscribe(colecaoGrupoPermissoes => {
console.log(colecaoGrupoPermissoes)
this.colecaoGrupoPermissoes = colecaoGrupoPermissoes;
})
this.perfilAcessoForm = this.builder.group({
id: [],
nome: ['', [Validators.required, Validators.maxLength(120)]],
tipoPerfil: ['', [Validators.required]],
unidade: this.builder.group({
id: ['', [Validators.required]]
}),
descricao: ['', [Validators.required, Validators.maxLength(80)]],
permissoes: ([{}]),
}, {});
Html
<div id="collapse{{i}}" class="accordion-body collapse" aria-expanded="false" style="">
<div class="panel-body">
<!-- BUTTON ADD FORMAÇÃO -->
<div class="row">
<div *ngFor="let grupoPermissao of colecaoGrupoPermissao.grupoPermissoes">
<div class="col-md-6">
<p>{{grupoPermissao.nome | translate}}</p>
</div>
<div class="col-md-6">
<input-container fieldErrorCode="{{extractErrorCode('permissao')}}" fieldName="permissao">
<select class="form-control" formControlName="permissoes" [compareWith]="compareFn" multiple>
<option *ngFor="let permissao of grupoPermissao.permissoes" [ngValue]="permissao">{{permissao.nome}}</option>
</select>
</input-container>
</div>
</div>
</div>
</div>
</div>