当新项目添加到数组时，刷新可排序

Question

可排序组件仅显示初始数组元素。当新值被推入数组中时，排序不会显示它。

组件： 从'@ angular/core'导入{Component};

@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

解决方法：手动呼吁writeValue的SortableComponent

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); 
    } 
} 

的