Question

我正在尝试重现DoCheck角度的未来。但是我收到的错误是：forEachRemoveItem' of null - 我无法理解。请问有谁帮我解决问题？

这是我的代码：

import { Component, Input, DoCheck, IterableDiffers } from '@angular/core';
@Component({
  selector:'numbers',
  template:`
    {{numbers}} <br/>
    <p *ngFor="let change of changes">{{change}}</p>
  `,
  styles: ['p{padding:0;margin:0}']
})

export class NumbersComponent implements DoCheck {
  @Input('numbers') numbersArray:Array<string>;
  changes:Array<string>=[];
  differ;

  constructor(private differs:IterableDiffers){
    this.differ = differs.find([]).create(null);
  }

  ngDoCheck(){

    const differences = this.differ.diff(this.numbersArray);

    if(differences){
      if(differences.forEachAddItem){
        differences.forEachAddedItem((item) =>{
          if((item) && (item.item)){
            this.changes.push('added', item.item);
          }
        })
      }
    }

     if(differences.forEachRemoveItem){
      differences.forEachRemovedItem((item) =>{
        if((item) && (item.item)){
          this.changes.push('removed' + item.item);
        }
      })
    }
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  numbers = '';
}

如果需要更多详情，请告诉我。

我的模板：

Enter Array (comma-separated): 
<input [(ngModel)]="numbers" (onModelChange)="onModelChange"/> <br/>
<numbers [numbers]="numbers.split(',')"></numbers>

Answer 1

<强> app.component.html

首先，替换

<numbers [numbers]="numbers.split(',')"></numbers>

带

<numbers [numbers]="numbers.split('')"></numbers>

<强> numbers.component.ts

然后将所有逻辑包装在if

中

const differences = this.differ.diff(this.numbersArray);

if(differences){
  ... some logic..
}

最后你犯了错别字

if(differences.forEachAddItem){
                        ||
                        \/
               forEachAddedItem


if(differences.forEachRemoveItem){
                           ||
                           \/
                  forEachRemovedItem){

<强> Stackblitz Example

`DoCheck` - 将错误抛出为`forEachRemoveItem＆＃39; of null`

1 个答案: