代码之家 › 专栏 › 技术社区 › dagda1

每次redux存储刷新时,局部角度状态都会消失

ngrx angular

dagda1 · 技术社区 · 6 年前

我使用Angular4和ngrx进行全局状态管理。

我有一些组件可以呈现许多子组件:

<div upload-list-item *ngFor="let upload of (uploads | async).items" [upload]="upload"></tbody>

我想存储项视图是否在本地组件的状态下展开。如果我的反应是这个价值所在:

@Component({
  // tslint:disable-next-line
  selector: '[upload-list-item]',
  template: `
    <tr class="top-level" (click)="setExpanded()">
      <td>
        <a
          href="javascript:void(0)"
          title="Expand/Collapse Row"
          [class]="expanded ? 'datatable-icon-down' : 'datatable-icon-right'"
        >
        </a>
      </td>
    </tr>
    <tr *ngIf="expanded">
      <td class="detail-td" colspan="6">
        Expanded
      </td>
    </tr>
  `,
  styleUrls: ['./upload-list-item.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UploadListItemComponent {
  @Input() upload: Upload;

  expanded = false;

  setExpanded() {
    this.expanded = !this.expanded;
  }
}

这是预期的行为吗?

0 回复 | 直到 6 年前

Borys Kupar 6 年前

Angular在默认情况下不知道哪个元素已被更改,所以它将再次重新呈现整个列表,您的组件将被销毁,这就是您丢失本地状态的原因。

你可以加上 trackBy 函数改为ngFor,所以Angular不会重新渲染所有内容,只修改更改的组件。不错的帖子 here .

<div upload-list-item *ngFor="let upload of (uploads | async).items; trackBy: trackByFn"
 [upload]="upload"></tbody>

在容器组件中:

trackByFn(index, item) {
  return index; // or item.id
}

或者,您可以在容器组件中存储每个上载项的本地状态,该组件正在呈现上载项。

marcoinarrea 6 年前

我不知道我是否理解你的怀疑。但是请确保在呈现接口时没有任何操作更新“上载”状态。每次更新上载时,ngFor指令都会重新呈现接口,您会有丢失更改的感觉。我理解这种情况发生在您身上是因为从每个列表项中更新状态,从而修改整个列表,从而再次呈现视图。在这些情况下,可以为ngFor提供trackBy函数,以指定视图的呈现方式。

推荐文章

Heathcliff · 访问NGRX中的HTTP头响应

3 年前

Rajiv · ngrx选择器订阅多次引发事件。。。存储中有实值,然后是未定义的值,然后是空值

7 年前

KiraAG · 功能模块中未提供注入令牌

7 年前

AngularM · 如何在ngrx中测试效果?

7 年前

Ramesh Rajendran · 使用ngrx和角度

7 年前

David Ruyle · ngrx、rxjs和angular 5

7 年前

Thiago Rodrigues · 从Reducer调用选择器

7 年前

Frank Visaggio · 使用NGRX和Angular同步处理依赖于另一个可观察对象的可观察对象

7 年前

Hikmat G. · ngrx保存状态数据的地方

7 年前

bucicimaci · 链式减速器ngrx

7 年前