Как создать пользовательский компонент списка, позволяющий дочернему форматированию проходить через переменную цикла в AngularDart? - PullRequest
Новая
       5

Как создать пользовательский компонент списка, позволяющий дочернему форматированию проходить через переменную цикла в AngularDart?

0 голосов
/ 17 апреля 2019

Я хочу создать пользовательский компонент списка (вертикальный список) в угловом дротике, чтобы я мог использовать список и проходить через отдельные элементы, а также предлагать дополнительные функции, такие как removeItem и reorder list: 

<vertical-list [for]="let item of myList" remove order>
  <a [routerLink]="item.url()">{{item.title}}</a>
</vertical-list>

Я не уверен, как подойти к этому.Я начал писать код ниже, пока не понял, что у меня не хватает глубины. 

@Component(
  selector: 'vertical-list',
  template: '''<table>
    <caption *ngIf="caption != null">{{caption}}</caption>
      <tr *ngFor="let item of list">
        <td *ngIf="order"><button [class.hidden]="item == list.first" (click)="moveUp(item)">^</button></td>
        <td><content></content></td>
        <td *ngIf="remove"><button (click)="removeItem(item)">X</button></td>
      </tr>
    </table>''',
  directives: [
    coreDirectives
  ]
)
class VerticalList<T> {
  @Input() String caption;
  @Input('for') List<T> list;
  @Input() bool order;
  @Input() bool remove;

  void moveUp(T item) {
    final index = list.indexOf(item);
    list.remove(item);
    list.insert(index-1, item);
  }

  void removeItem(T item) => list.remove(item);
}

Мне кажется, мне нужен какой-то способ создать итератор и передать его дочернему элементу, но у меня есть доступ в родительском..

Спасибо.

...