Angular2 – ngFor指令不映射已删除的项目

发布时间：2020-12-17 17:59:56 所属栏目：安全来源：网络整理

导读：我有一个Item容器和项目模式,其中应该添加子项目并从其容器中删除.添加很好,而删除什么都不做.当删除任何子项时,angular2 * ngFor指令似乎不起作用. import { NgFor} from 'angular2/common'; import { bootstrap } from 'angular2/platform/browser'; impor

我有一个Item容器和项目模式,其中应该添加子项目并从其容器中删除.添加很好,而删除什么都不做.当删除任何子项时,angular2 * ngFor指令似乎不起作用.

import { NgFor} from 'angular2/common';
    import { bootstrap } from 'angular2/platform/browser';
    import { Component,View,Directive,OnDestroy,Input,enableProdMode } from 'angular2/core';
    import { CORE_DIRECTIVES} from 'angular2/common';


    @Component({selector: 'itemcontainer',})
    @View({ template: `<ul (click)="$event.preventDefault()">
                       <li *ngFor="#it of items">Any Item</li>
                       </ul>
                       <div><ng-content></ng-content></div>`,directives: [NgFor],})
    export class ItemContainer {
        public items: Array<Item> = [];

        public addItem(item: Item) {
            this.items.push(item);
        }

        public removeItem(item: Item) {
            var index = this.items.indexOf(item);
            if (index === -1) {
                return;
            }

            console.log(`Index about to remove: ${index} this.items length: ${this.items.length}`);
            this.items.slice(index,1);
            console.log(`this.items length: ${this.items.length}`);
        }
    }

    @Directive({ selector: 'item' })
    export class Item implements OnDestroy {

        @Input() public heading: string;

        constructor(public itemcontainer: ItemContainer) {
            this.itemcontainer.addItem(this);
        }

        ngOnDestroy() {
            this.itemcontainer.removeItem(this);
        }
    }

    @Component({
        selector: 'my-app'
    })
    @View({
        template: `<div (click)="$event.preventDefault()">
            <button type="button" (click)="addItem()">Add item</button>
            <button type="button" (click)="removeItem()">Remove item</button>

        <itemcontainer>
            <item *ngFor="#containerItem of containerItems" [heading]="containerItem.title">Content </item>
        </itemcontainer>
    </div>`,directives: [CORE_DIRECTIVES,Item,ItemContainer],})

    class Tester {

        private counter: number = 2;

        public containerItems: Array<any> = [
            { title: 'Item1' },{ title: 'Item2' },];

        addItem() {
            this.containerItems.push({ title: `Item ${this.counter}` });
        }

        removeItem() {

            if (this.containerItems.length > 0) {
                this.containerItems.splice(this.containerItems.length - 1,1);
            }
        }
    }

    enableProdMode();
    bootstrap(Tester);

在添加和删除两个新项目之后,DOM就像这样：

<itemcontainer>
        <ul>
            <li>Any Item</li>
            <li>Any Item</li>
            <li>Any Item</li>
            <li>Any Item</li>
        </ul>
        <div>
            <item>Content </item>
            <item>Content </item>
        </div>
    </itemcontainer>

问题是li部分没有删除.任何的想法？

(我用角度2.0.0-beta.3和2测试了它.)

解决方法

实际上,Angular2仅在实例更改时检测更改.我的意思是数组的实例不会在元素内部发生变化.

您可以使用它(请参阅第二个切片调用)：

public removeItem(item: Item) {
  var index = this.items.indexOf(item);
  if (index === -1) {
    return;
  }

  console.log(`Index about to remove: ${index} this.items length: ${this.items.length}`);
  this.items.slice(index,1);
  console.log(`this.items length: ${this.items.length}`);

  this.items = this.items.slice();
}

这个答案也可以帮助你：

> Angular 2: Trouble with Custom Components
> Angular2 @ViewChildren/@ViewQuery’s QueryList not updated when dynamically adding second level children

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!