Angular 如何重新评估已筛选阵列上的ngFor？

我在做一个twitter主持人。为此，我有一个tweet列表，每个tweet如下：

export class Tweet{
    id: number;
    text: string;
    image: string;
    profileImage: string;
    name: string;
    username: string;
    date: number;
    state: TweetState;
}

TweetState是一个包含4个状态的枚举，分别为new、approved、favorite和denied

我想在一个不同的选项卡中分别显示它们，当用户单击相应的按钮时，更改状态，从而更改选项卡所在的位置

这是我的html：

<mat-tab-group mat-selected="selectedTab" mat-border-bottom mat-autoselect mat-swipe-content>
  <mat-tab label="NEW" class="tab" fxLayout="row">
      <app-tweet *ngFor="let tweet of campaign.tweets | new" [tweet]="tweet"></app-tweet>
  </mat-tab>
  <mat-tab label="FAVORITE" class="tab">
    <app-tweet *ngFor="let tweet of campaign.tweets | favorite" [tweet]="tweet"></app-tweet>
  </mat-tab>
  <mat-tab label="APPROVED" class="tab">    
    <app-tweet *ngFor="let tweet of campaign.tweets | approved" [tweet]="tweet"></app-tweet>
  </mat-tab>
  <mat-tab label="DENIED" class="tab">
    <app-tweet *ngFor="let tweet of campaign.tweets | denied" [tweet]="tweet"></app-tweet>
  </mat-tab>
</mat-tab-group>

至少在初始状态下，管道工作良好。当我单击按钮更改状态时，状态会正确更改，但不会切换选项卡

我设想*ngFor指令在创建DOM时运行，我应该从一个位置删除它，然后手动将其添加到另一个位置。最好的方法是什么？可观察到的

这是Tweet模板

<mat-card class="tweet">
  <mat-card-header>
    <img matCardAvatar src="{{tweet.profileImage}}" alt="{{tweet.username}}">
    <mat-card-title>{{tweet.name}}</mat-card-title>
    <mat-card-subtitle>{{tweet.username}}</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="{{tweet.image}}" alt="{{tweet.username}}">
  <mat-card-content>
      <p>
        {{tweet.text}}
      </p>
      <p>
        {{tweet.state}}
      </p>
    </mat-card-content>
  <mat-card-actions>
    <div fxFlex="auto" fxLayout="row" fxLayoutAlign="space-around center">
      <span class="material-icons unselectable" (click)="setApproved()">thumb_up</span>
      <span class="material-icons unselectable" (click)="setDenied()">thumb_down</span>
      <span class="material-icons unselectable" (click)="setFavorite()">star</span>
    </div>
  </mat-card-actions>
</mat-card>

---

如果你的问题是数据更新，那么它不更新的原因是因为你没有告诉Angular你已经改变了tweet的状态

如果您有campaign.tweets的*ngFor=tweet，则应切换到可观察的*ngFor=tweets的tweet$| async，其中在您的组件或父组件中动态生成可观察的。 例如，在该模板的同一组件中，您可以执行以下操作

//the component boiler plate stuff
export class MyTweetComponent implements OnInit, OnChanges {
  @Input() tweets$: Observable<Tweet[]> //parse your campaign object up front.

  ngOnInit() {} // initialize tweets$ here if you got a service or something.
  ngOnChanges() {} //tell angular to detect changes (you may add additional logic here for handling tweets)

  constructor() { } //if you have a service to grab tweets you can inject it here

}

异步管道将为您处理订阅，您所要做的就是在组件中从父级向下传递可观察到的tweet或对其进行初始化