Несколько угловых кнопок, выбранных по умолчанию в Angular 7 - PullRequest
Новая
       13

Несколько угловых кнопок, выбранных по умолчанию в Angular 7

0 голосов
/ 16 января 2019

Я смотрю, чтобы создать значения по умолчанию для группы кнопок-переключателей.По какой-то причине всякий раз, когда используется множественный атрибут, значения не устанавливаются так, как следует.

Для отдельного значения по умолчанию в группе переключателей без нескольких атрибутов проблем нет.И я думал, что это будет работать так же, но, очевидно, это не так.Мой код выглядит следующим образом:

Основной html.component, где я использую форму с вводом 

    <app-customer-form [customer]="updateCustomer"></app-customer-form>

внутри формы, является частью с кнопкой переключения для компаний, которые связаны склиент: 

    <mat-button-toggle-group  #groupCompany="matButtonToggleGroup" 
             multiple="true"
             [value]="selectedCompanies"
             (change)="onValueChange(groupCompany.value)" 
             >
             <mat-button-toggle *ngFor="let item of companyList" 
         [value]="item">{{item?.name}}</mat-button-toggle>
    </mat-button-toggle-group>

в файле ts Я извлекаю компании из моего объекта и сохраняю значения внутри массива / объекта selectedCompanies.CompanyList получен и работает нормально.Я проверил с console.log, и selectedCompanies создается как ожидалось и содержит правильные значения.Но кнопки переключения не выбраны.

Довольно сложно поместить сюда файл ts.file, потому что он действительно вложен в другие компоненты.Но вкратце это выглядит так.Если щелкнуть строку в компоненте таблицы, она отправляет событие родительскому компоненту со значением заказчика, а внутри объекта появляется свойство компаний.Полученное значение используется для заполнения формы кнопкой переключения.

файл form.ts: 

export class FormComponent implements OnInit, OnChanges {
@Input() customer : ICustomer; 
companyList: ICompany[];
selectedCompanies: ICompany[];
constructor( 
    private companyService : CompanyService,
    public sharedService : SharedServices
    ) {}
ngOnInit(){
this.instantiateForm(); // retreives the values for the companyList and 
                        // other default values.
}
ngOnChanges() {
this.setSelectedCompanies();
}
setSelectedCompanies(){
this.selectedCompanies = this.customer.companies
}

У кого-нибудь есть мысли по этому поводу?Спасибо за помощь!

1 Ответ

0 голосов
/ 17 января 2019

Работает нормально.Я думаю, что вы имеете в виду два разных объекта, имеющих одинаковые значения атрибутов:

см. Html-код этого компонента: 

<p>
  Default appearance:
  <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
  </mat-button-toggle-group>
</p>

<p>
  Legacy appearance:
  <mat-button-toggle-group appearance="legacy" name="fontStyle" aria-label="Font Style"   multiple="true" [value]="selectedCompanies">

    <mat-button-toggle *ngFor="let company of values" 
         [value]="company">{{company?.name}}</mat-button-toggle>
  </mat-button-toggle-group>
</p>

и машинописный код для компонента 

import {Component} from '@angular/core';

/**
 * @title Button toggle appearance
 */
@Component({
  selector: 'button-toggle-appearance-example',
  templateUrl: 'button-toggle-appearance-example.html',
  styleUrls: ['button-toggle-appearance-example.css'],
})
export class ButtonToggleAppearanceExample {

 values:Comapny[]= [];

 selectedCompanies:Comapny[]=[];

  ngOnInit() {

this.values.push (new Comapny("First Company", "Address 1"));
this.values.push (new Comapny("Second Company", "Address 2"));
this.values.push (new Comapny("Third COmpany", "Address 3"));

this.selectedCompanies.push(this.values[0]);
this.selectedCompanies.push(this.values[1]);

  }

}


class Comapny {

constructor (name:string, address:string){
   this.name=name;
   this.address=address;
  }

  name:string;
  address:string;
}

попробуйте запустить его здесь, заменив code

Вот вывод с несколькими атрибутами и двумя выбранными кнопками

enter image description here

Пожалуйста, убедитесь, что вы ссылаетесь на одни и те же объекты в обоих списках

...