Как Показать Скрыть div ?
при нажатии английской кнопки он показывает свой соответствующий div в то же время, если я нажал на другую кнопку, то он показывает свой div, но предыдущий не закрыт. Я хочу, чтобы на click English он показывал div и снова нажимал его закрыть.
Обратите внимание, что это делает его динамичным, потому что я не знаю, сколько там Лэнгов.
убедитесь, что вы не делаете это для статических данных.
вот ссылка на мой автономный пример в
stackblitz <pre><a href="https://stackblitz.com/edit/angular-showhide-088?file=src%2Fapp%2Fsho-hide%2Fsho-hide.component.html"></a>
Что я уже пробовал:
onclickEnglishDiv(clickLang,index){
if (this.visibleIndex === index) {
this.visibleIndex = -1;
} else {
this.visibleIndex = index;
}
HTML
<pre> <div *ngFor="let lang of langList;let index = index" >
<div class="engbutton">
<button class="englishButton" (click)="onclickEnglishDiv(lang,index)">{{ lang }}</button>
<div *ngIf="visibleIndex === index" class="knowEnglish">
<div>
<div *ngFor="let data of filteredLangList" class="engDivObj">{{data.name}}</div>
</div>
</div>
</div>
</div>
Mehul M Thakkar
так в чем же проблема? Этот пример работает в соответствии с вашими потребностями.
[no name]
Я хочу, чтобы при щелчке по английскому языку он открывал свой eng div, а при щелчке по хинди-свой Hindi div, но не закрывал eng div.
>пользователь может видеть все div одновременно.
> Я хочу, чтобы это было динамично
вот ссылка, по которой вы можете увидеть, как это показать .
https://stackblitz.com/edit/angular-nxjuby-vxxeqf?file=src/app/app.component.ts
но этого я понять не могу.
не могли бы вы преобразовать его в angular 7
Mehul M Thakkar
потому что visibleIndex обновляется каждый раз. вам нужно создать разные массивы для видимости для каждого языка.
Объявить visibleLang:any[]=[]
и добавьте строку в функцию onclickEnglishDiv,
this.visibleLang[clickLang] = !this.visibleLang[clickLang];
В шаблон изменения, если условие visibleIndex === индекс
visibleLang[Ланг]
[no name]
спасибо, братан, это работает.
ZurdoDev
пожалуйста, опубликуйте в качестве решения.
Mehul M Thakkar
опубликовано в качестве решения.