只有 *ngIf 指令的第一个匹配返回 ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：Only first match from *ngIf directive returns ExpressionChangedAfterItHasBeenCheckedError只有 *ngIf 指令的第一个匹配返回 ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2020-04-04 20:44:30
【问题描述】：

我在 ngfor 中有一个嵌套的 ngif：

<ion-content>
    <ng-container *ngFor="let item of (results | async)">
      <ng-container *ngFor="let elements of item.bc; first as isFirst; index as i">
        <ng-container *ngIf="elements.Event.StartTime >= '2019-12-11T15:00:00' ?func():false">
          <ion-item>{{elements.Event.StartTime | date:'shortTime'}}</ion-item>
        </ng-container>
      </ng-container>
    </ng-container>
</ion-content>

我从这里看到了带有函数的分辨率：Show only first match from *ngIf expression

export class Tab4Page implements OnInit {

  results: Observable<any>;
  isFirstMatch = false;

  constructor(private channel: Service) {
  }

func() {
    if (this.isFirstMatch === false) {
      this.isFirstMatch = true;
      return true;
    } else {
      return false;
    }
  }

  ngOnInit() {

    this.results = this.channel.searchData();
  }

}

但这对我不起作用。我收到此错误：

ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'ngIf: true'。当前值：'ngIf: false'。

有没有更好的方法只输出第一个匹配项？或者如果没有，请告诉我应该如何修复 ExpressionChanged 错误。

【问题讨论】：

为什么不在模板中使用数据之前按照您的意愿构建数据并摆脱不必要的黑客攻击？在这种情况下，您可以订阅 observable/using map 运算符在此处进行过滤，而不是尝试在 html 中使用 break。
谢谢，洋柴！ :)

标签： angular ngfor angular-ng-if

【解决方案1】：

您可以检查 ts 中的第一次出现：

html

<ion-content>
    <ng-container *ngFor="let item of (results | async)">
      <ng-container *ngIf="findFirstElement(item.bc) as element">
          <ion-item>{{element.Event.StartTime | date:'shortTime'}}</ion-item>
        </ng-container>
    </ng-container>
</ion-content>

  findFirstElement(item : any[]){
    if (!this.isFirstMatch && item.some(el => el.Event.StartTime >= '2019-12-11T15:00:00')){
      this.isFirstMatch = true ;
      return item.find(el => el.Event.StartTime >= '2019-12-11T15:00:00') ;
    }

    return null ;
  }

更新

我认为不再需要 isFirstMatch 标志，因为您想为每次迭代（项目）呈现第一次出现：

  findFirstElement(item : any[]){
      return item.find(el => el.Event.StartTime >= '2019-12-11T15:00:00') ;
  }

【讨论】：

【解决方案2】：

只需在代码中完成：

this.firstMatches$ = this.results.pipe(
  map(results => // rx map operator
    results.map(item => // array map operator to transform
      item.bc.find(el => // into first found match
        el.Event.StartTime >= '2019-12-11T15:00:00')))
);


<ion-content>
  <ng-container *ngFor="let item of (firstMatches$ | async)">
    <ion-item>{{item.Event.StartTime | date:'shortTime'}}</ion-item>
  </ng-container>
</ion-content>

或者：

this.firstMatch$ = this.results.pipe(
  map(results => // rx map operator
    results.find(item => // find first item
      !!item.bc.find(el => // that contains a match
        el.Event.StartTime >= '2019-12-11T15:00:00'))),
  map(item => item.bc.find(el => el.Event.StartTime >= '2019-12-11T15:00:00')) // map into that element
);


<ion-content>
  <ng-container *ngIf="firstMatch$ | async as item">
    <ion-item>{{item.Event.StartTime | date:'shortTime'}}</ion-item>
  </ng-container>
</ion-content>

代码比模板强大得多，使用它。

模板难以阅读和理解。我不清楚您是否试图仅显示一个 ion-item（对于所有项目的第一个匹配元素）或多个（对于每个项目中的第一个匹配元素）。显示了两个答案。

【讨论】：

非常感谢@bryan60 ！！