Question

我在* ngfor循环中使用了密钥管道。数据以JSON格式提供。

    @Pipe({
      name: 'keys'
    })
    export class KeysPipe implements PipeTransform {
      transform(value, args: string[]): any {
        if (!value) {
          return value;
        }

        let keys = [];
        for (let key in value) {
          keys.push({key: key, value: value[key]});
        }
        return keys;
      }
   }

-

<div *ngFor="let item of jsonObject | keys">
        <p>{{ item.value.code }}</p>
</div>

问题是当我删除JSON中的元素时，ngFor没有更新。

我已经尝试了两个选项：

在元素删除后调用 this.applicationRef.tick（）; ，无需更改
impure pipe＆＃34; pure：false ＆＃34;。这导致了数百MB的chrome中大量的内存使用，我不得不杀死这个进程。

如果有其他方法吗？

谢谢！

Answer 1

您可以尝试的一种方式：

@import ScrollableStackView

ScrollableStackView *scrollable = [[ScrollableStackView alloc] initWithFrame:self.view.frame];
scrollable.stackView.distribution = UIStackViewDistributionFillProportionally;
scrollable.stackView.alignment = UIStackViewAlignmentCenter;
scrollable.stackView.axis = UILayoutConstraintAxisVertical;
[self.view addSubview:scrollable];

UIView *rectangle = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 55)];
[rectangle setBackgroundColor:[UIColor blueColor]];

// add your views with
[scrollable.stackView addArrangedSubview:rectangle]; 
// ...

这样你就不会改变原始数组。这对于管道而言非常重要

另见

Answer 2

除非更改引用或值，否则

纯管道不会运行。要解决此问题，请将pure: false添加到您的Pipe装饰器中。见Pipes

离。

@Pipe({
    name: 'keyVal',
    pure: false
})
export class KeyValPipe implements PipeTransform {
    ...
}

编辑我没看到OP已经这样做了。另一种选择是设置临时变量，然后为其分配jsonObject，从而创建一个新的引用。您还可以尝试从temp到jsonObject的深层复制

Angular 2 - * ngFor with keys pipe在更改对象时不会刷新

2 个答案: