Question

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

2018-02-03

317

angular typescript

我正在 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 管道将为您处理订阅，您所要做的就是在组件中将推文的可观察对象从父级传递下来或初始化它。