Angular 2 показать/скрыть динамически генерируемые div

Основываясь на ответе, который я получу, я буду генерировать элементы div динамически. например, если мой ответ

Array = {response: {  
                  " para1" : "para1name", 
                   " para2" : "para2name"
              }
}

<div *ngFor="let x of Array; > 
<button>x.para1</button>
<div > content for para1</div>
</div>

Мне нужно сохранить все свойства из json в массив и выполнить итерацию по нему, чтобы отобразить элементы div. В этом случае у меня должно быть 2 div, но это не работает. а также, когда я нажимаю кнопку для para1, тогда должен отображаться div для para1 n когда я нажимаю на para2 div, я должен скрыть div для para1 и показать div для para2. как это можно осуществить.


javascript angular ngfor
person Karthi    schedule 30.07.2017    source источник
comment
Массив имеет только один объект-элемент с двумя свойствами.   -  person Rahul Patil    schedule 30.07.2017
comment
Можете ли вы помочь мне реализовать его   -  person Karthi    schedule 30.07.2017
comment
Можете ли вы опубликовать ожидаемый массив? Это одно и то же (объект с двумя свойствами para1 и para2)?   -  person Rahul Patil    schedule 30.07.2017

Ответы (2)


arrow_upward
1
arrow_downward

Ссылаясь на это решение, в котором вы хотите повторить использование ключей вашего объекта json https://stackoverflow.com/a/37431657/2013245

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    if (!value) {
      return value;
    } 

    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    } 
    return keys;
  } 
}

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

Затем в вашем component.ts вы можете сделать что-то вроде этого

<div *ngFor="let x of Array;" >
 <div *ngFor="#temp of x | keys"> 
   <button>temp.para1</button>
   <div> content for para1</div>
 <div>
</div>

Надеюсь, это поможет.

person ashley    schedule 30.07.2017
comment
Большое спасибо за помощь .. Есть ли какой-нибудь пост, который поможет показать и скрыть div .. Это была главная задача - person Karthi; 30.07.2017
comment
ты пробовал нгиф? - person ashley; 30.07.2017
comment
НгЕсли ?? Как это может помочь - person Karthi; 30.07.2017
comment
advancesharp.com/blog/1212/…. Не могли бы вы проверить эту ссылку и посмотреть, может ли это помочь с динамическим отображением и скрытием? Любой вопрос, который вы можете задать. Я только что попробовал. оно работает - person ashley; 01.08.2017

arrow_upward
-1
arrow_downward 

show: boolean = false;

clicked() {

      console.log("clicked");
      this.show = !this.show;

}

ваш html-код -

input type="submit" value="Search" (click)="clicked()"

<div *ngIf="show">
your div content to be displayed dynamically
</div>
person Malatesh d    schedule 06.04.2018
comment
Пожалуйста, позаботьтесь о своем форматировании и постарайтесь сделать его более описательным. - person Jan B.; 06.04.2018
comment
Я новичок на этом сайте, столкнулся с небольшими трудностями..!! - person Malatesh d; 06.04.2018
comment
Не беспокойтесь, мы все когда-то новички. Пожалуйста, ознакомьтесь с разделом справки и часто задаваемых вопросов: stackoverflow.com/help - person Jan B.; 06.04.2018