Angular 2显示/隐藏动态生成的div

Question

根据我得到的响应，我将动态生成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的按钮时，当我点击para2 div时，我应该显示对于para1的div我应该为para1隐藏div并且应该为para2显示div。如何实现这一目标。

Answer 1

参考你想要使用你的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>

希望有所帮助。

Answer 2

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>