Question

我有四个选择的垫选择：S3，RDS，VM，URL。选择这些选项之一时，我想显示基于组件的信息。例如，当我选择S3时，我想显示与S3相对应的组件。或者，如果我选择RDS，则将显示与RDS对应的组件。这是代码。我是Angular的新手。您能帮我实施吗？

我的TS文件：

list: any[] = [
    { value: 'sm1', viewValue: 'S3'},
    { value: 'sm2', viewValue: 'RDS'},
    { value: 'sm3', viewValue: 'VM'},
    { value: 'sm4', viewValue: 'URL'}
  ];
  isSelected: boolean;
  // tslint:disable-next-line:ban-types
  sm1: Boolean = undefined;
  get(data) {
    this.isSelected = true;
    if (data.value === 'sm1') {
      this.sm1 = true;
      console.log(data);
    } else {
      this.sm1 = false;
    }
  }

我的HTML文件：

<td><mat-form-field class="meschamps" >
          <mat-select (onSelectionChange)="get($event)" placeholder="Type de service">
            <mat-option *ngFor="let obj of list" (click)="get(obj)" [value]="obj">
              {{obj.viewValue}}
            </mat-option>
          </mat-select>
        </mat-form-field></td>
      </tr></table>

      <span *ngIf="isSelected">
          <div class="row" *ngIf="sm1">
              <app-s3></app-s3>
          </div>
          <div class="row" *ngIf="!sm1 && =="sm2" ">
            <app-rds></app-rds>
          </div>
          <div class="row" *ngIf="!sm1 && =="sm3" ">
            <app-vm></app-vm>
          </div>
        <div class="row" *ngIf="!sm1 && =="sm4" ">
            <app-cartographie-flux></app-cartographie-flux>
          </div>
        </span>

Answer 1

不需要在TS文件中维护变量，可以使用[(value)]属性存储当前选定的项目：

HTML代码：

<mat-form-field class="meschamps">
                   Here
                 \/\/\/\/
    <mat-select [(value)]="selectedValue" (onSelectionChange)="get($event)" placeholder="Type de service">
        <mat-option *ngFor="let obj of list" (click)="get(obj)" [value]="obj">
            {{obj.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

<div *ngIf="isSelected">
    <div class="row" *ngIf="selectedValue.value == 'sm1'">
        <!-- <app-s3></app-s3> -->
        Display app-s1
    </div>
    <div class="row" *ngIf="selectedValue.value == 'sm2'">
        Display app-s2
        <!-- <app-rds></app-rds> -->
    </div>
    <div class="row" *ngIf="selectedValue.value == 'sm3'">
        Display app-s3
        <!-- <app-vm></app-vm> -->
    </div>
    <div class="row" *ngIf="selectedValue.value == 'sm4'">
        Display app-s4
        <!-- <app-cartographie-flux></app-cartographie-flux> -->
    </div>
</div>

TS：

export class SelectOverviewExample {

  selectedValue: any;
  list: any[] = [
    { value: 'sm1', viewValue: 'S3' },
    { value: 'sm2', viewValue: 'RDS' },
    { value: 'sm3', viewValue: 'VM' },
    { value: 'sm4', viewValue: 'URL' }
  ];
  isSelected: boolean;
  // tslint:disable-next-line:ban-types
  sm1: Boolean = undefined;
  get(data) {
    this.isSelected = true;
    if (data.value === 'sm1') {
      this.sm1 = true;
      console.log(data);
    } else {
      this.sm1 = false;
    }
  }
}

Working_Demo

Answer 2

为了清楚起见，将其简化为最简单的形式。

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

@Component({
  selector: 'select-form-example',
  templateUrl: 'select-form-example.html',
  styleUrls: ['select-form-example.css'],
})
export class SelectFormExample {

  list: any[] = [
    { value: 'sm1', viewValue: 'S3'},
    { value: 'sm2', viewValue: 'RDS'},
    { value: 'sm3', viewValue: 'VM'},
    { value: 'sm4', viewValue: 'URL'}
  ];

  selected = {};

}

查看

<mat-form-field class="meschamps">
    <mat-select [(value)]="selected" placeholder="Type de service">
        <mat-option *ngFor="let obj of list" [value]="obj">
            {{obj.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>
{{selected | json}}
<span *ngIf="selected">
          <div class="row" *ngIf="selected.value == 'sm1'">
            1
          </div>
          <div class="row" *ngIf="selected.value =='sm2'">
            2
          </div>
          <div class="row" *ngIf="selected.value =='sm3'">
            3
          </div>
         <div class="row" *ngIf="selected.value =='sm4'">
          4
         </div>
</span>

可以看到here。最后提示：使用{{ YOUR_VARIABLE | json }}来查看与视图交互时发生的情况。

如何基于垫选择选项显示组件

2 个答案: