Angular 9 - ngSwitch 未链接

Question

我得到了一个表格，该表格应该根据我在下拉列表中选择的大小写进行更改：

入住的房间类型：简单、双人间或三人间。

但是，尽管我读到有关 ngSwitch 的信息以显示 DOM（一种简单形式），但我无法 link 2（类型和 ngSwitch）

根据我在网上找到的逻辑，我把我的HTML代码和开关的条件放在我的component.ts模板中（它在一个单独的HTML文件中一开始但都不起作用）。

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

    <div [ngSwitch]="types.value">
      <div *ngSwitchDefault="''">
        <p>Essai Espace</p>

          <div>
      <form [formGroup]="revenueForm" (ngSubmit)="revenueManager()">

          <div class="form-group">
          <select name="types" id="types" ngModel="types"  class="form-control"  formControlName="types">
            <option *ngFor="let type of types" [ngValue]="type.value">
              {{type.viewValue}}
            </option>
          </select>
          </div>
      </form>
          <pre>{{revenueForm.value | json }}</pre>
        </div>
      </div>

      <div *ngSwitchCase="'roomsSimples'">
        <p>Essai Espace</p>

        <form [formGroup]="revenueForm" (ngSubmit)="revenueManager()">

        <div class="form-group">
            <label>Rooms Simples</label>
            <input type="text" class="form-control" formControlName="roomsSimples">
          </div>

          <button type="submit" class="btn btn-primary">OK</button>

        <div>

          <div class="form-group">
            <select name="types" id="types" ngModel="types"  class="form-control"  formControlName="types">
              <option *ngFor="let type of types" [ngValue]="type.value">
                {{type.viewValue}}
              </option>
            </select>
          </div>
        </div>
        </form>
        <pre>
    {{revenueForm.value | json }}
    </pre>
      </div>
  `,

  styleUrls: ['./revenue.component.sass']
})

我在 class 中声明了以下类型：

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 的修改没有出现。你能指导我走上正确的轨道吗？谢谢

Answer 1

在 [ngSwitch]="types.value" types 中是一个 Array 而不是 Object,所以 types.value 将不起作用 types 只能通过索引访问，例如 types[0].value

从你的代码来看，你试图实现的目标并不是很清楚，但看起来你在组织组件的方式上存在一些逻辑问题，而不仅仅是使用 ngSwitch。

根据我的理解，这是一个使用 ngSwitch 的示例。

component.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'},
  ];
}

component.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 文档 https://angular.io/api/common/NgSwitch

此外，我建议为您的类型使用枚举，这样可以更轻松地重构您的代码，以防将来您的类型值发生变化。

Angular 9 - ngSwitch 未链接

Angular 9 - ngSwitch not linked

ng-switch

angular