2017-10-16 24 views
0

Hellow Stackコミュニティ
私はオブジェクトの配列を持っていますが、最初にユーザーに公開することはできません。 利用可能なすべてのオブジェクトをngFor経由で配列に表示しています。各配列要素ごとに詳細を表示/非表示にするトグルボタンを追加します。現在、私は以下のソリューションを使用しています。各イベントごとに配列に私は細部の可視性を駆動する別の配列に追加boolean値保存:
テンプレート:角2/4リスト要素の詳細を表示/非表示

<ul> 
    <li *ngFor="let schedule of schedulesList; let idx = index"> 
    <div> 
     {{schedule.beginDate}} to {{schedule.endDate}} 
     <span> 
     <i class="material-icons md-24" >{{configureMdIcon}}</i> 
     <i class="material-icons md-24" (click)="eventListVisibility($event, idx)">{{seeListMdIcon}}</i> 
     {{scheduleEventsListVisible}} 
     </span> 
     <div *ngIf="eventsVisible[idx]">Events: 
      <ul> 
       <li *ngFor="let event of schedule.additionalEvents"> 
       {{event.details}} 
       </li> 
      </ul> 
     </div> 
    </div> 
    </li> 
</ul> 

のcontroler:

eventListVisibility(e: Event, idx: number){ 
    if(typeof this.eventsVisible != undefined){ 
     this.eventsVisible[idx] = !this.eventsVisible[idx]; 
    } 

このコードの動作をしかし私の質問は次のとおりです:
これを行うより巧妙な方法はありますか?視認性を向上させるためにアレイを追加することは無駄だと感じています。私がAngularを知る限り、この問題を解決する隠れた機能がいくつかあります。
ありがとうございました

答えて

1

あなたがやったやり方は、それに近づける最善の方法です。あなたがうまくいるので、マークアップからコードにコメントをつけていない場合でもngを使用しているので、そのようにしてもパフォーマンス上の罰則はありません:)

+0

私のコメントが役に立ちましたら、これを正しいものとしてマークしてください回答。 –

関連する問題