如何在 html 和 angular 的多個條件下使用 ngIf

Question

我必須在每次點擊中刪除 select 更改內容如何在 html 和 angular 的多個條件中使用 *ngIf “

我已經嘗試但不工作

//HTML

<div>

{{服務}}

<div *ngIf ="service === 'Consult'">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry. has been the industry's
    standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make
    a type specimen book.</p>
</div>

<div *ngIf= "service === 'Data' ">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry. has been the industry's
    standard dummy text ever since the 1500, when an unknown printer took a galley of type and scrambled</p>
</div>

<div *ngIf="Digital">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry.  has been the industry's
    standard dummy text ever since the 1500,</p>
</div>

<div *ngIf="Security">
  <p>Loren gypsum is simply dummy text of the printing and typesetting industry.has been the industry's standard dummy text ever since the 1500, when an unknown printer took a galley of</p>
</div>

<div *ngIf="Cloud">
  <p>Loren gypsum is simply dummy text of the printing and typesetting industry.has been the industry's
  </p>
</div>

//Ts

services = ['Consult', 'Data', 'Digital', ' Security', 'Cloud']



}

Answer 1

嗨，suresh，所以對於下拉（選擇框）中的每次更改，您都需要更改內容嗎？

Answer 2

嘗試這個：

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select (selectionChange)="onSelectionChange($event)">
    <mat-option *ngFor="let item of services " [value]="item">
      {{item}}
    </mat-option>
  </mat-select>
</mat-form-field>

ts 文件：

onSelectionChange(event) {
 this.service = event;
}

在模板中：

<div *ngIf ="service === 'Consult'">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry. has been the industry's
    standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make
    a type specimen book.</p>
</div>

<div *ngIf= "service === 'Data' ">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry. has been the industry's
    standard dummy text ever since the 1500, when an unknown printer took a galley of type and scrambled</p>
</div>

Answer 3

您可以像這樣在 select 中使用兩種方式綁定（ngModel）

<mat-select [(ngModel)]="SelectValue" (ngModelChange)="hello()">
    <mat-option *ngFor="let item of array" [value]="item.value" >
       {{item.viewValue}}
    </mat-option>
</mat-select>

你的 ts 文件

SelectValue;
  array = [
    {value: '0', viewValue: 'DivisionOne'},
    {value: '1', viewValue: 'DivisionTwo'},
    {value: '2', viewValue: 'DivisionThree'}
  ];

並列出

<div *ngIf="SelectValue === '0'">
  hello this division one
</div>
<div *ngIf="SelectValue === '1'">
  hello this division Two
</div>
  <div *ngIf="SelectValue === '2'">
  hello this division Three
<div>

這是給你的stackblitz

Answer 4

這是您的問題的解決方案。

app.component.ts

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; services = ['Consult', 'Data', 'Digital', 'Security', 'Cloud']; selectedService: any = ''; }

用戶 ngModel 將selectedService變量綁定到視圖。

app.component.html

 <hello name="{{ name }}"></hello> <p> Start editing to see some magic happen:) </p> <h2>Select Service</h2> <select [(ngModel)]="selectedService"> <option value="">Select</option> <option *ngFor="let service of services" [value]="service">{{service}}</option> </select> {{selectedService}} <div *ngIf = "selectedService === 'Consult' "> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p> </div> <div *ngIf = "selectedService === 'Cloud'"> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, </p> </div> <div *ngIf = "selectedService === 'Data'"> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p> </div> <div *ngIf = "selectedService === 'Digital'"> <p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> </div> <div *ngIf = "selectedService === 'Security'"> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</p> </div>