Несколько условий в ngIf в Angular 6

Question

Я хочу спрятать один div и показать другой для этого я написал ниже код

Моя проблема в том, что я использовал несколько условий в ngIf, но не работает должным образом. После того, как я нажму «Показать вспомогательное содержимое1», я хочу скрыть основное содержимое и отобразить «Дополнительное содержимое 1» и наоборот для всех кнопок. Что я должен сделать для этого. Пожалуйста помоги.

angular typescript angular5 angular6 angular-ng-if

3

vedankita kumbhar 21 Авг 2018 в 14:19

Answer 1

Вы были очень близки к вашему результату и изучали свой код, как будто вы учитесь, Хорошая Работа !! Вы должны проверить, включен ли какой-либо контент, поэтому вам необходимо скрыть все три кнопки и отобразить ваше суб-содержимое. Ниже приведен правильный код согласно вашему требованию,

<!-- Display all of the SubContents is disable. -->
<div *ngIf="!showSubContent && !showSubContentTwo && !showSubContentThree">
     <button (click)="showSubContent=!showSubContent">Show Sub content1</button>
     <button (click)="showSubContentTwo=!showSubContentTwo">Show Sub content2</button>
     <button (click)="showSubContentThree=!showSubContentThree">Show Sub content3</button> 
     <h2>  Main content </h2>
</div>

<!-- Display if SubContent-1 is enable. -->
<div *ngIf="showSubContent && !showSubContentTwo && !showSubContentThree">
    Sub Content 1 here
    <button (click)="showSubContent=!showSubContent">Show Main Content</button>
</div>

<!-- Display if SubContent-2 is enable. -->
<div *ngIf="showSubContentTwo && !showSubContent && !showSubContentThree">
    Sub Content 2 here
    <button (click)="showSubContentTwo=!showSubContentTwo">Show Main Content</button>
</div>

<!-- Display if SubContent-3 is enable. -->
<div *ngIf="showSubContentThree && !showSubContentTwo && !showSubContent">
    Sub Content 3 here
    <button (click)="showSubContentThree=!showSubContentThree">Show Main Content</button>
</div>

3

Augustin R 21 Авг 2018 в 12:12

Answer 2

Вы можете упростить свой код, используя ngSwitch:

<div [ngSwitch]="showSubContent">

  <div *ngSwitchDefault>
      <button (click)="showSubContent=1">Show Sub content1</button>
      <button (click)="showSubContent=2">Show Sub content2</button>
      <button (click)="showSubContent=3">Show Sub content3</button> 
      <h2>  Main content </h2>
  </div>

  <div *ngSwitchCase="1">
      Sub Content 1 here
  </div>

   <div *ngSwitchCase="2">
      Sub Content 2 here
  </div>


  <div *ngSwitchCase="3">
      Sub Content 3 here
  </div>

  <button *ngIf="showSubContent" (click)="showSubContent=0">Show Main Content</button>
</div>

3

sloth 21 Авг 2018 в 12:16

Answer 3

Нет необходимости использовать так много условий, чтобы заставить работать так. Это не интуитивно понятно, чтобы понять вашу логику, вместо этого используйте переключатель

// Define a variable with name content in component
export class AppComponent  {
content = 'mainContent'
constructor() {
}}

<div>
   <button (click)="content='showSubContent'">Show Sub content1</button>
   <button (click)="content='showSubContentTwo'">Show Sub content2</button>
   <button (click)="content='showSubContentThree'">Show Sub content3</button>
 </div>
<div [ngSwitch]="content">

 <div *ngSwitchDefault>
   My Main content
  </div> 
<div *ngSwitchCase="'showSubContent'">
   Sub Content 1 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>

<div *ngSwitchCase="'showSubContentTwo'">
   Sub Content 2 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>

<div *ngSwitchCase="'showSubContentThree'">
   Sub Content 3 here
   <button (click)="content='showMainContent'">Show Main Content</button>
</div>
</div>

1

Pramod Patil 21 Авг 2018 в 12:16

Несколько условий в ngIf в Angular 6

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

angular