Открыть нажал дочерний лив div - PullRequest
Новая
       7

Открыть нажал дочерний лив div

0 голосов
/ 23 сентября 2018

Я использую приложение Angular 6, где я перечисляю несколько элементов,

HTML: 

<ul class="list-unstyled">
    <li *ngFor="let item of items">
        {{item.order}}
        <button (click)="openCurrentOrder()"> open {{item.id}} </button> <br>
        <div class="list-items inner-list-items" *ngIf="isActive">
            opened order {{item.id}}
        </div>
    <br><br><br>
    </li>
</ul>

Ts: 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  items: any = [
    {id: "1",order: "one"},
    {id: "2",order: "two"},
    {id: "3",order: "three"},
    {id: "4",order: "four"},
    {id: "5",order: "five"},
  ]

  isActive: boolean = false;

  openCurrentOrder() {
    console.log("opened");
    this.isActive = true;
  }

}

Здесь, если я нажимаю на кнопку определенного заказа, открывается соответствующий дочерний элемент.

Например, здесь приведен следующий список,

Кнопка заказа 1 Кнопка заказа 2кнопка,Кнопка «Порядок 5»

Когда я нажимаю кнопку «Порядок 2», отображается текст с opened order 2 и все остальные порядки; дочерний элемент div должен быть скрыт. Это ожидаемый результат ..

Но теперь, когда я нажимаю на конкретную кнопку, открываются все дочерние элементы.

Как открыть только дочерний элемент конкретного элемента div при нажатии кнопки?

KПросто помогите мне достичьрезультат с использованием только чистого JavaScript или машинописного текста без запроса .

Рабочая stackblitz https://stackblitz.com/edit/angular-llhfhp

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Я думаю, вам нужно добавить к объекту "items" isActive: false.Таким образом, цикл отображается не на всех кнопках, а только на одном идентификаторе.Посмотрите мой код, если он вам поможет:

HTML : 

    <ul class="list-unstyled">
    <li *ngFor="let item of items">
        {{item.order}}
        <button (click)="openCurrentOrder(item.id)"> open {{item.id}} </button> <br>
        <div class="list-items inner-list-items" *ngIf="item.isActive">
            opened order {{item.id}}
        </div>
    <br><br><br>
    </li>
</ul>

TS: 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  items: any = [
    {id: "1",order: "one", isActive: false},
    {id: "2",order: "two", isActive: false},
    {id: "3",order: "three", isActive: false},
    {id: "4",order: "four", isActive: false},
    {id: "5",order: "five", isActive: false},
  ]



  openCurrentOrder(e) {
    console.log("opened");
    this.items[e -1].isActive = true;

  }

}
0 голосов
/ 23 сентября 2018

Посмотрите на свой стек, здесь: https://stackblitz.com/edit/open-current-div Действительно, вы должны добавить текущий элемент в качестве параметра функции openCurrentOrder.Кроме того, добавьте поле в кнопки, чтобы узнать, открыта ли текущая кнопка или нет.
Вам необходимо иметь одну переменную isActive для каждой кнопки.Если нет, все кнопки имеют одинаковое *ngIf и одинаковое состояние.

...