Angular 9 - ngSwitch не привязан - PullRequest
Новая
       21

Angular 9 - ngSwitch не привязан

0 голосов
/ 04 августа 2020

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

@Component({
  selector: 'app-revenue',
  // templateUrl: './revenue.component.html',
  template: `

    
      
        Essai Espace

{{revenueForm.value | json }}

Essai Espace

ОК
{{type.viewValue}} 
    {{revenueForm.value | json }}
`, styleUrls: ['./revenue.component.sass']})

Я объявил в своем классе типы: 

export class RevenueComponent implements OnInit {
  revenueForm: FormGroup;

  // doubles = value.roomsDoubles;
  header = "Outils Revenus";

  //Pour les rooms
  types = [
    {value: 'roomsSimples', viewValue: 'Rooms Simples'},
    {value: 'roomsDoubles', viewValue: 'Rooms Doubles'},
  ];
  // type = this.types.values();

  constructor(private fb: FormBuilder) {
  }

  ngOnInit(): void {
    this.revenueForm = this.fb.group({
      roomsDoubles: [],
      roomsDoublesEnfant: [],
      roomsTriples: [],
      roomsAppartement: [],
      types: [],
    })
  }

  revenueManager() {
    console.log('Données du formulaire...', this.revenueForm.value);
  }
}

Хотя значение типов отображается на моем рендере, модификация DOM не отображается. Не могли бы вы направить меня по правильному пути? Спасибо

1 Ответ

1 голос
/ 04 августа 2020

In [ngSwitch]="types.value" types - это Array , а не Object , поэтому выполнение types.value не будет работать типы доступны только по индексу, например types[0].value

Из вашего кода не очень ясно, чего вы пытаетесь достичь, но похоже, что у вас есть проблема с logi c на пути вы организуете компонент, который выходит за рамки простого использования ngSwitch.

Вот пример использования ngSwitch в контексте того, чего, как я понимаю, вы хотите достичь.

компонент. ts 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  selectedRoomType: any;
  types = [
    {value: 'roomsSimples', viewValue: 'Rooms Simples'},
    {value: 'roomsDoubles', viewValue: 'Rooms Doubles'},
  ];
}

компонент. html

<!-- Dropdown to select the room type -->
<mat-form-field appearance="fill">
  <mat-label>Room Types</mat-label>

  <!-- Bind the selection to selectedRoomType -->
  <mat-select [(value)]="selectedRoomType" >
    <mat-option *ngFor="let type of types" [value]="type.value">
      {{type.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

<!-- Switch Depending on the type -->
<div [ngSwitch]="selectedRoomType">

  <!-- If type is roomsSimples -->
  <div *ngSwitchCase="'roomsSimples'">
    <strong> Rooms Simple Form </strong>
  </div>

  <!-- If type is roomsDoubles -->
  <div *ngSwitchCase="'roomsDoubles'">
    <strong> Rooms Doubles Form </strong>
  </div>

  <!-- Any other value (including undefined) -->
  <div *ngSwitchDefault>
    <strong> Select a Room Type </strong>
  </div>

</div>

Вот рабочий stackblitz https://stackblitz.com/edit/angular-ivy-6uwuux Убедитесь, что для проверки angular docs https://angular.io/api/common/NgSwitch

Кроме того, я предлагаю использовать перечисления для ваших типов, это упростит рефакторинг вашего кода в случае, если значения ваших типов изменятся в будущее.

...