如何在 html 和 Angular 的多个条件下使用 ngIf

Question

我必须在每次点击时选择 drop 更改内容如何在 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

这是您问题的解决方案。

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>

Answer 2

您可以像这样在选择中使用两种方式绑定（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 3

试试这个：

<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 4

嗨，suresh，所以对于下拉（选择框）中的每一个更改，您都需要 改一下内容好吗？