1

1.こんにちは。要素を表示/非表示にする方法はたくさんあります。反復配列の各要素に true/false で変更するプロパティをアタッチします。

 <button  (click)="attachmentHide = !attachmentHide"></button>
<itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItem'></itemComp>

したがって、配列の各要素をリストするたびに、item.showSubItem プロパティが作成されます。この場合、配列が変更されています。

しかし、このアイテムを表示/非表示にしたいが、メイン配列を編集せずにどうすればよいですか。最初にこの配列が等しいかどうかをチェックするので重要です。配列に関係のない var を作成する答えがありましたが、すべての要素を個別に表示/非表示にするためにすべての要素に対して var を作成する方法は?

アップデート：

<div class="row col-sm-offset-1"  *ngFor="let item of itemsArray">
    <div class="col-sm-4">
        <div class="row assignedItem">
            <span class="glyphicon glyphicon-plus-sign " title="sub items"  (click)= "showSubItem = !showSubItem"></span>

            <div class=" itemName" title="State:{{item.state}},Type: {{item.type}}">{{item.name}}</div>
            <!--users component-->

        <!--show subItems-->
        <itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItem'></itemComp>
    </div>
</div>

ts ファイル:

export class ItemComponent {
@Input() itemsArray: Array<Object>;

constructor () {}
}

更新 2:

home.ts で i=false を使用して配列を初期化しました。

viewNodes(result) {
    setTimeout(() => {
        this.myRes =  result;
        this.showSubItemsArr = this.myRes.content.map(i => false);
        this.itemsParentArray = this.myRes.content;
        console.log( this.showSubItemsArr );
        this.showAssigned = true;
    }, 3000);
}

HTMLで子コンポーネントに送信した後：

<div class="container">
<div class="row">
    <!--show item-->
    <itemComp [showSubItems]="showSubItemsArr" [itemsArray]='itemsParentArray'  ></itemComp>
</div>

showSubItems[idx] でアイテムを表示しようとするよりも。

    <div class="row col-sm-offset-1"  *ngFor="let item of itemsArray let idx=index">
    <div class="col-sm-4">
        <div class="row assignedItem">
            <span class="glyphicon glyphicon-plus-sign " title="sub items"  (click)= "showSubItem = !showSubItem"></span>
            <span class="glyphicon glyphicon-paperclip" title="attached docs" (click)="attachmentHide = !attachmentHide"></span>
            <div class=" itemName" title="State:{{item.state}},Type: {{item.type}}">{{item.name}}</div>
            <!--users component-->
            <usersComp [userArray]="item.assignment"></usersComp>
        </div> {{showSubItems}}
        <!--attachment component-->
        <attachmentComp class="col-sm-offset-1" [attachmentsArray]='item.attachments' *ngIf="attachmentHide"></attachmentComp>
        <!--show subItems-->
        <itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItems[idx]'></itemComp>
    </div>
</div>

しかし、それはエラーを示しています:

TypeError: 未定義のプロパティ '0' を読み取れません

しかし、すべての{{showSubItems}}配列をレンダリングするとfalse,false,false、問題なく表示されます。

idx値が 2 回目の反復の準備ができていないようです。申し訳ありませんが、プランカーを使用できません(作業中)。

4

1 に答える 1

2

データが利用可能になったら、 の各項目に対して1 つのエントリ (デフォルト ) を取得this.itemsArrayする別の配列を作成します。showSubItemsfalsethis.itemsArray

constructor() { // or somewhere else where `this.itemsArray` data is already set
  this.showSubItems = this.itemsArray.map(i => false);
}

indexの機能を利用ngForして変数を宣言しidxます。この変数を使用して、this.showSubItems配列 item 内の項目を、元の項目と同じインデックスで参照します。this.itemsArray 

<div class="row col-sm-offset-1"  *ngFor="let item of itemsArray let idx=index">
    <div class="col-sm-4">
        <div class="row assignedItem">
            <span class="glyphicon glyphicon-plus-sign " title="sub items"  (click)= "showSubItems[idx] = !showSubItems[idx]"></span>

            <div class=" itemName" title="State:{{item.state}},Type: {{item.type}}">{{item.name}}</div>
            <!--users component-->

        <!--show subItems-->
        <itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItems[idx]'></itemComp>
    </div>
</div>
于 2016-06-13T12:23:40.963 に答える