Question

我在Angular做一个推特主持人。为此，我有一个推文列表，每条推文都是这样的：

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

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

Answer 1

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

如果您有*ngFor="tweet of campaign.tweets"，则应切换到可观察对象。 *ngFor="tweet of (tweets$ | async)"组件或父组件中的哪个位置即时生成Observable。例如，您可以在此模板的相同组件中执行此操作。

//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管道将为您处理订阅，您只需在组件中传递来自父级的可观察的推文或初始化它。

如何重新评估过滤后阵列上的ngFor？

1 个答案: