Angular 2顯示/隱藏動態生成的div

-1

根據我得到的響應，我將動態生成div。例如，如果我的響應是Angular 2顯示/隱藏動態生成的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。這是如何實現的。

來源

2017-07-30 Karthi

該數組只有一個具有兩個屬性的元素對象。 –

你能幫我實現嗎 – Karthi

你能發佈你期望的數組嗎？它是否一樣（具有兩個屬性para1和para2的對象）？ –

參照要遍歷的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; 
    } 
}

上述代碼將推動你的鍵和值在一個數組，由此可以迭代的usings鍵該溶液。

然後在你的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>

希望有所幫助。

來源

2017-07-30 06:07:13 ashley

非常感謝您的幫助..是否有任何可以指導您展示隱藏div的帖子..這是您嘗試使用ngIf的主要任務 – Karthi

？ – ashley

NgIf ??如何可以幫助 – Karthi

Angular 2顯示/隱藏動態生成的div

回答

相關問題