Angular 以角度显示在一段时间内生成的选定错误消息

我想在消息生成时显示消息。我只想显示我创建的错误数组中选定的错误消息。我正在使用

array.filter

方法来过滤错误消息，但这不起作用。它只是显示数组中的所有元素

以下是服务代码：

error: any[] = [];

addError() {
    // error gets generated over a period of time
    this.error.push({ msg: 'A', statusText: 'a', status: 25 });
    this.error.push({ msg: 'B', statusText: 'b', status: 35 });
    this.error.push({ msg: 'C', statusText: 'c', status: 45 });
    this.error.push({ msg: 'D', statusText: 'd', status: 55 });
    this.error.push({ msg: 'E', statusText: 'e', status: 65 });
    this.error.push({ msg: 'F', statusText: 'f', status: 75 });

    this.error = this.error.filter(err => err.status > 45);
  }

  getErrors(): any[] {
    console.log(`in the get methog ${JSON.stringify(this.error)}`);
    return this.error;
  }

下面是显示错误消息的

父组件

：

  data: any[];

  constructor(private _error: ErrorService) {}

  ngOnInit() {
    this.data = this._error.getErrors();
  }

下面是生成错误的

子组件

：

addError() {
    this._info.addInfo();
  }

注意：此addError方法在按钮的单击事件中调用

这里的问题是：即使我正在过滤错误数组，我也可以看到所有的错误消息（

A-F）

，而我应该只看到

D、E和F

我哪里做错了？？我是否需要使用observable来实现期望的结果，或者我可以通过对上述代码进行一些修改来实现

---

这是链接到

该问题与参考文献有关

• 父组件的
  ngOnInit
  ，
  数据
  保存
  错误
  数组的引用

• 当我们执行array.filter（）时，

  error

  将保存一个新引用，但不会在

  父组件中更新

解决方案我们可以通过简单的代码修改来修复，而无需使用Observable。我们可以使用Observable来解决这个问题

步骤1:将

过滤器错误

属性读取器添加到

错误服务

@Injectable({
  providedIn: 'root'
})
export class ErrorService {

  error: any[] = [];

  addError() {
      this.error.push({ msg: 'A', statusText: 'a', status: 25 });
      this.error.push({ msg: 'B', statusText: 'b', status: 35 });
      this.error.push({ msg: 'C', statusText: 'c', status: 45 });
      this.error.push({ msg: 'D', statusText: 'd', status: 55 });
      this.error.push({ msg: 'E', statusText: 'e', status: 65 });
      this.error.push({ msg: 'F', statusText: 'f', status: 75 });
  }

  get filteredErrors() {
    return this.error.filter(err => err.status > 45);
  }
}

第2步：读取

filteredErrors

以迭代过滤错误。以下是父组件的详细信息

@Component({
  selector: 'app-parent',
  template: `<p *ngFor="let error of errors">
      First Name: {{ error.msg }} Last Name: {{ error.statusText }}
    </p>
    <app-child></app-child>`
})
export class ParentComponent {

  constructor(public  _error: ErrorService) {}

  get errors() {
    return this._error.filteredErrors || [];
  }
}

@组件({
选择器：“应用程序父级”，
模板：`
名字：{{error.msg}}姓氏：{{error.statusText}

代码链接。
在geterror中编写过滤代码method@MukulSharma，同样的结果：(