새 항목을 배열에 추가 할 때 정렬 새로 고침

Question

정렬 가능한 구성 요소는 초기 배열 요소 만 표시합니다. 새 값을 배열에 푸시하면 정렬 할 수 없습니다.

구성 요소 : '구성 요소'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

해결 방법 : 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); 
    } 
} 

의 writeValue에 직접 전화