0

Esse é meu html

<div class="container">
    <div class="row">
        <div class="col-md-12">
        <table class="table table-striped table-bordered">
            <caption>
                Lista de Aplicabilidades
                <div class="float-right">
                    <input type="button" class="btn btn-success" (click)="onCreate()" value="+">
                </div>
            </caption>
            <thead class="thead-dark">
                <tr>
                    <th>Nome</th>
                    <th>Contexto</th>
                    <th>Tipo de Pagamento</th>
                    <th>Tipo de Entrega</th>
                    <th>MarketPlace</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let aplicabilidade of dataSource" [formGroup]="createForm">
                    <td>
                        <input formControlName="id" type="hidden">
                        <label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.name }}</label>
                        <label *ngIf="aplicabilidade.edit === true"><input formControlName="name" type="text"></label>
                    </td>
                    <td> 
                        <label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.context }}</label>
                        <label *ngIf="aplicabilidade.edit === true"><input formControlName="context" type="text"></label>
                    </td>

                    <td>
                        <input formControlName="id" type="hidden">
                        <label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.typePaymentDetailsModel }}</label>
                        <label *ngIf="aplicabilidade.edit === true"><input formControlName="typePaymentDetailsModel" type="text"></label>
                    </td>
                    <td> 
                        <label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.typeDeliveryDetailsModels }}</label>
                        <label *ngIf="aplicabilidade.edit === true">
                            <!-- <input formControlName="typeDeliveryDetailsModels" type="text"> -->
                            <mat-form-field>
                                <mat-select multiple formControlName="typePaymentDetailsModel" placeholder="Tipo de Pagamento" name="payment">
                                    <mat-option  *ngFor="let payment of dataSourcePayment" [value]="payment">   
                                    {{payment.name}}            
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>
                        </label>
                    </td>

                    <td> 
                        <label *ngIf="aplicabilidade.edit != true">{{ aplicabilidade.marketPlace }}</label>
                        <label *ngIf="aplicabilidade.edit === true"><input formControlName="marketPlace" type="text"></label>
                    </td>

                    <td>
                        <fa *ngIf="checkEdit()" name="pencil" (click)="initEditAplicabilidade(aplicabilidade)"></fa>
                        <fa *ngIf="aplicabilidade.edit === true" name="save" (click)="onUpdate()"></fa>
                    </td>
                    <td>
                        <fa *ngIf="checkEdit()" name="times" (click)="onDelete(aplicabilidade)"></fa>
                        <fa *ngIf="aplicabilidade.edit === true" name="ban" (click)="aplicabilidade.edit = null; initDefaultForm();"></fa>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Minha Component

export class ApplicabilityComponent implements OnInit {

  createForm: FormGroup;
  public dataSource: Model.ApplicabilityItem[];
  public dataSourcePayment: Model.TypePaymentItem[];
  public dataSourceDelivery: Model.TypeDeliveryItem[];
  public form:any;

  constructor(private _applicabilityService: ApplicabilityService, 
              private builder: FormBuilder, 
              private route: Router) {}

  ngOnInit() {
    this.onGet();
    this.initDefaultForm();    
  }

  initDefaultForm() {
    this.createForm = this.builder.group({
      id: '',
      name: '',
      context: '',
      typeDeliveryDetailsModels: '',
      typePaymentDetailsModel: '',
      marketPlace: false
    });
  }

  onCreate(){
    this.route.navigate(['create-aplicability']);
  }

  onDelete(aplicabilidade: Model.ApplicabilityItem) {
    debugger;
    if (confirm('Deseja excluir o operador: ' + aplicabilidade.name + '?')) {

      this._applicabilityService
        .delete<any>(aplicabilidade.id)
        .subscribe((res) => {
          this.onGet();
        });
    }
  }

  onGet(){
    this._applicabilityService
      .getAllAplicability<Model.Result<Model.ApplicabilityItem>>()
      .subscribe((data: Model.Result<Model.ApplicabilityItem>) =>{
        this.dataSource = data.itens;
      });

      this._applicabilityService
      .getAllDelivery<Model.Result<Model.TypeDeliveryItem>>()
      .subscribe((data: Model.Result<Model.TypeDeliveryItem>) => {
      this.dataSourceDelivery = data.itens;
    }); 

    this._applicabilityService
    .getAllPayment<Model.Result<Model.TypePaymentItem>>()
    .subscribe((data: Model.Result<Model.TypePaymentItem>) => {
      this.dataSourcePayment = data.itens;
    });

  }

  initEditAplicabilidade(aplicabilidade: any){
    aplicabilidade.edit = true;
    this.createForm = this.builder.group({
      id: aplicabilidade.id,
      name: aplicabilidade.name,
      context: aplicabilidade.context,
      typeDeliveryDetailsModels: aplicabilidade.typeDeliveryDetailsModels,
      typePaymentDetailsModel: aplicabilidade.typePaymentDetailsModel,
      marketPlace: aplicabilidade.marketPlace
    });
  }

  checkEdit() {
    if (this.dataSource == null || this.dataSource.length == 0) return false;
      return this.dataSource.filter((item: any) => item.edit === true).length == 0;
  }

  onUpdate(){
    let formValue = this.createForm.value;
    this._applicabilityService.update<Model.Result<Model.ApplicabilityItem>>(formValue)
    .subscribe(success =>{
        this.onGet();
      },
        error =>{
      } 
    );
  }

}

O que eu é, quando eu clicar em editar(Lápis no Form), ele me abre a tela de edição(Isso está fazendo), mas se eu tenho TypePayment, as mat-select deveriam vir selecionada. Pelo meu código, deveria funcionar, mas não funciona. Não pego erro algum, mas o Dropdown não vem com o(s) item(ns) selecionados.

Minha Model

export interface ApplicabilityItem{
        id: string,
        name: string,
        context: string,
        typePaymentDetailsModel: TypePaymentItem,
        typeDeliveryDetailsModels: TypeDeliveryItem,
        marketPlace: boolean
    }

    export interface TypePaymentItem{
        id: string,
        sgpTypePaymentId: number,
        name: string
    }

    export interface TypeDeliveryItem{
        id: string,
        sgpTypeDeliveryId: number,
        name: string
    }

Pelo POstman, esse é um exemplo de Aplicabilidade com ses tipos complexos:

{
            "id": "3bd8862d-1b15-42fe-9734-426364823ecb",
            "name": "Teste",
            "context": "Texto",
            "typePaymentDetailsModels": [
                {
                    "id": "00dfea8b-4265-42d2-842a-2b854bfcc4dc",
                    "sgpTypePaymentId": 2,
                    "name": "Crédito"
                },
                {
                    "id": "37f0bda4-8661-4339-9c33-3fcbbb2bcd84",
                    "sgpTypePaymentId": 3,
                    "name": "Teste"
                },
                {
                    "id": "200c2e50-468d-46b0-8325-2cb76502c4df",
                    "sgpTypePaymentId": 78,
                    "name": "Novo Teste"
                }
            ],
            "typeDeliveryDetailsModels": [
                {
                    "id": "75c7fdbb-82b7-4e2f-ac03-3696883820f4",
                    "sgpTypeDeliveryId": 1,
                    "name": "Bahia"
                }
            ],
            "marketPlace": true
        }

EDIT1

Conforme o colega Eduardo Vargas me orientou, tentei fazer conforme ele me disse. Fiz assim: Component

compareValues(c1: Model.ApplicabilityItem, c2: Model.ApplicabilityItem): boolean{
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
  }

Html

<mat-form-field>
   <mat-select multiple [compareWith]="compareValues" formControlName="typePaymentDetailsModel" 
       placeholder="Tipo de Pagamento" name="payment" >
       <mat-option  *ngFor="let payment of dataSourcePayment" [value]="payment">   
            {{payment.name}}            
       </mat-option>
   </mat-select>
</mat-form-field>

e continua a dropdown no edit vindo sem os itens selecionados.

1 Resposta 1

1

Voce tem que usar a funcao compareWIth do mat-select

<mat-select multiple formControlName="typePaymentDetailsModel" placeholder="Tipo de Pagamento" name="payment" [compareWith]="comapreValues">
   <mat-option  *ngFor="let payment of dataSourcePayment" [value]="payment">   
        {{payment.name}}            
   </mat-option>
</mat-select>

Ai no seu componente adicionar a funcao respectiva

compareValues(value1: any, value2: any): boolean {
    return value1.id=== value2.id; //adicione sua logica aqui
}
5
  • Eduardo, uma dúvida. O value1 e value2, o que realmente eu passo ali? O que eu estou comparando?
    – pnet
    Commented 1/08/2018 às 13:44
  • Entendi agora, o any seria o meu tipo, que no meu caso seria Model.ApplicabilityItem. Vou testar
    – pnet
    Commented 1/08/2018 às 14:07
  • Esse é o erro agora: >Error: Uncaught (in promise): Error: Value must be an array in multiple-selection mode.
    – pnet
    Commented 1/08/2018 às 16:30
  • C2 está vindo nulo. Pelo que eu entendi, C1 é a minha model que a API me entrega e C2 seria os valores gravados. Na comparação, ele mostraria exatamente o que é comum em C1 e C2, conforme comparação. C2 está null e não sei porque.
    – pnet
    Commented 1/08/2018 às 17:00
  • Cara, seu exemplo está correto e vou marcar a sua resposta. Porém, vou abrir outra thread para o erro, já que é outra coisa.
    – pnet
    Commented 1/08/2018 às 19:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .