新しいアイテムが配列に追加されたときにソート可能なリフレッシュ

Question

ソート可能なコンポーネントは、初期配列要素のみを表示します。新しい値が配列にプッシュされると、ソート可能な値は表示されません。

コンポーネント： 'Component @ from' @ angular/core ';

@Component({ 
    selector: 'custom-item-template-demo', 
    templateUrl: './custom-item-template.html' 
}) 
export class CustomItemTemplateDemoComponent { 
    public itemStringsLeft: any[] = [ 
    'Windstorm', 
    'Bombasto', 
    'Magneta', 
    'Tornado' 
    ]; 

    public addItem() { 
    this.itemStringsLeft.push("new item"); 
    } 
} 

テンプレート：

<button type="button" (click)="addItem()">Add</button> 
<template #itemTemplate let-item="item" let-index="index"><span>{{index}}: {{item.value}}</span></template> 
    {{itemStringsLeft.length}} 
    <pre>{{ itemStringsLeft | json }}</pre> 
    <bs-sortable 
    [(ngModel)]="itemStringsLeft" 
    [itemTemplate]="itemTemplate" 
    itemClass="sortable-item" 
    itemActiveClass="sortable-item-active" 
    placeholderItem="Drag here" 
    placeholderClass="placeholderStyle" 
    wrapperClass="sortable-wrapper" 
    ></bs-sortable> 

Answer 1

回避策：

import { Component, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'custom-item-template-demo', 
    templateUrl: './custom-item-template.html' 
}) 
export class CustomItemTemplateDemoComponent { 
    public itemStringsLeft: any[] = [ 
    'Windstorm', 
    'Bombasto', 
    'Magneta', 
    'Tornado' 
    ]; 

    @ViewChild(SortableComponent) sortableComponent: SortableComponent; 
    public addItem() { 
    this.itemStringsLeft.push("new item"); 
    this.sortableComponent.writeValue(this.itemStringsLeft); 
    } 
} 

SortableComponentのwriteValueに手動で呼び出します