如何重新评估过滤数组上的 ngFor

Question

我正在用Angular做一个Twitter版主。为此，我有一个推文列表，每条推文都是这样的：

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

TweetState 是一个具有 4 种状态的枚举，包括新状态、已批准状态、收藏状态和拒绝状态。

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

这是我的 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 时运行，我应该从一个地方删除它并手动将其添加到另一个地方。最好的方法是什么？可观察的？

这是推文模板

<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>

Answer 1

如果您的问题是数据更新，它不更新的原因是因为您没有告诉 Angular 您已经更改了tweets的状态。

在你有*ngFor="tweet of campaign.tweets"的地方，你应该切换到一个可观察量。 *ngFor="tweet of (tweets$ | 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
}

async管道将为您处理订阅，您所要做的就是在组件中将推文的可观察量从父级向下传递或初始化它。