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 的按钮时， para1 的 div 应该显示 n 当我点击 para2 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>