Блог

У меня есть шаговый элемент Angular Material, и первый <mat-step> содержит список флажков для проверки пользователем.

Следующий является первым <mat-step> с флажками:

 <mat-step [stepControl]="itemCheckboxes">
  <ng-template matStepLabel>Select The Items You Want</ng-template>
  <span *ngIf="items.length === 0">No items currently in your account.</span>
  <ul style="list-style-type:none; padding-left: 0px;">
    <li *ngFor="let item of items">
      <mat-checkbox (change)="onCheckboxChange($event, item.name)">{{ item.name }}</mat-checkbox>
    </li>
  </ul>
  <div>
    <button mat-button matStepperNext>Next</button>
  </div>
</mat-step>
  

Я пытаюсь создать конкретное <div> отображение в следующем <mat-step> , только если {{item.name}} установлены флажки с конкретными именами.

Например, если пользователь устанавливает флажок с именем «Banana», то <div> будет отображаться конкретный, связанный с установленным флажком «Banana». И если пользователь установит флажок с именем «Apple», тогда <div> будет отображаться другой.

Как бы я написал код для достижения этой цели? Я пытаюсь отредактировать существующий проект, и я очень новичок в программировании, но мне нужно сделать это быстро, поэтому пошаговые детали были бы очень признательны. Спасибо!

Вам нужно понимать «угловую философию». Угловая корреляция переменных в .ts (модель) с элементами в html (представление)

Итак, если вы объявляете переменную

 myvariable:boolean=true
  

И у вас флажок

  <mat-checkbox [(ngModel)]="myvariable">Banana</mat-checkbox>
  

Отношение [(ngModel)] в двух направлениях — привязка двумя способами — переменной и флажка. Если вы установите флажок, переменная станет true , если вы снимите флажок, переменная станет false .

Таким образом, вы можете писать в любом месте

 <div *ngIf="myvariable">
   If you see this is because the checkbox is true
</div>
  

Ну, у вас есть массив «элементов», поэтому, если вы создаете привязку — используйте [(ngModel)] для переменной

  <mat-checkbox [(ngModel)]="item.checked">{{ item.name }}</mat-checkbox>
  

Вы можете написать

 <div *ngIf="items[0].checked">
   You check the first element of the list before
</div>
  

Обновите, если мы хотим знать, установлен ли флажок «Банан»

Ну, я полагаю, у нас есть массив объектов

 items=[{name:"Banana"},{name:"apple"},{name:"orange"}...]
  

Когда установлен флажок один или несколько, мы преобразуем массив в нечто подобное

 items=[{name:"Banana",checked:true},{name:"apple"},{name:"Orange",checked:false}...]
  

Посмотрите, что один или несколько элементов могут не иметь свойства «проверено»

функция, подобная

 isSelect(fruit:string)
{
    return this.items.find(x=>x.checked amp;amp; x.name==fruit)!=null
}
  

возвращает true или false. Теперь у вас есть несколько вариантов:

1.-Использование геттера

 get isBananaSelected()
{
    return this.isSelect("Banana")
}
  

И использовать в ngIf

    <div *ngIf="isBananaSelected">...</div>
  

2.-Используйте вспомогательную переменную, которая вычисляется, когда шаговый механизм изменяет шаг

 <mat-horizontal-stepper (selectionChange)="selectionChange($event)">

isVisibleDiv:boolean=false //and auxiliar variable
selectionChange(event)
{
  if (event.selectedIndex==1){ //remember the index is 0 for the first step, 1 for the second...
      this.isVisibleDiv=this.isSelect("Banana")
  }
}

//and 
<div *ngIf="isVisibleDiv">...</div>
  

3.-Используйте вспомогательную переменную и вызывайте функцию при каждом изменении в выборе

 <mat-checkbox (change)="isVisibleDiv=this.isSelect("Banana")">
  

ПРИМЕЧАНИЕ: Похоже, что средство получения — лучший выбор, но будьте осторожны, средство получения выполняется несколько раз, второй вариант выполняется только при изменении шага, а третий вариант выполняет каждое изменение в любом флажке. (на самом деле для симплексных функций, как в этом случае, вы не отметили лучшую или худшую производительность), но нам нужно выбирать между simply и performance

Вы можете использовать ng-template amp; ngTemplateOutlet . Вот ДЕМОНСТРАЦИЯ. В примере показано только отображение шаблона. Когда флажок снят, ссылка на шаблон может быть удалена из массива

 import {
  Component,
  TemplateRef,
  VERSION,
  ViewChild
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  templates = [];
  items = [{
      name: "Banana"
    },
    {
      name: "Apple"
    },
    {
      name: "Orange"
    },
    {
      name: "Brinjal"
    }
  ];
  @ViewChild("Banana") Banana: TemplateRef < any > ;
  @ViewChild("Apple") Apple: TemplateRef < any > ;
  @ViewChild("Orange") Orange: TemplateRef < any > ;
  @ViewChild("Brinjal") Brinjal: TemplateRef < any > ;
  onCheckboxChange(event, name) {
    this.templates.push(this[name]);
  }
}
  

 <ng-template matStepLabel>Select The Items You Want</ng-template>
<span *ngIf="items.length === 0">No items currently in your account.</span>
<ul style="list-style-type:none; padding-left: 0px;">
  <li *ngFor="let item of items">
    <mat-checkbox (change)="onCheckboxChange($event, item.name)">{{ item.name }}</mat-checkbox>
  </li>
</ul>
<div>
  <button mat-button matStepperNext>Next</button>
</div>

<div *ngFor="let tmpl of templates">
  <ng-container [ngTemplateOutlet]="tmpl"></ng-container>
</div>


<ng-template #Banana>
  <span>Banana</span></ng-template>

<ng-template #Apple>
  <span>Apple</span></ng-template>

<ng-template #Orange>
  <span>Orange</span></ng-template>

<ng-template #Brinjal>
  <span>Brinjal</span></ng-template>