Question

我的组件更新了本地属性/变量后，我的视图没有更新，我遇到了问题。

在我的组件代码中，我创建了一个'newAlbum'属性，最初将其赋值为null。稍后在我的组件中调用名为openCreateForm的方法时，我希望将值分配给我的'newAlbum'属性，然后希望使用简单的*ngIf

更新我的视图

这是我的组件中的打字稿代码......

newAlbum: { title: string, editableImageList: EditableImage[], description: string, fromDate: string} = null;

constructor(private store: Store<any>,
                private fileService: FileService) {
    // more stuff here that isn't important
    }


openCreateForm(fileList: File[]) {
    const editableImageObservableList = _.map(fileList, (file) => {
        return this.fileService.imageFileToDataUrl(file)
            .map((dataUrl) => {
                return new EditableImage(null, dataUrl);
            });
    });
    zip(...editableImageObservableList).subscribe((editableImageList: EditableImage[]) => {
        this.newAlbum = {
            title: 'My new album',
            editableImageList,
            description: null,
            fromDate: String(moment().year())
        };
    });
}

这是我的组件模板中的HTML（在外部文件中）

<div class="album__create" *ngIf="newAlbum">
    This content should be shown...
</div>

在Chrome开发工具中调试并使用正确的参数触发openCreateForm方法时，this.newAlbum被正确分配了正确的属性，并且不再为空...但我的视图不会更新。我应该在界面上的某些DIV之间切换*ngIf="newAlbum"在我的视图中返回或切换标签时是否正常工作。无论如何，我可以告诉我为什么更新没有被解雇或我可以做什么来强制更新？非常感谢

如果以上任何内容没有意义，请说明并重新提出问题......再次感谢。

Answer 1

newAlbum的类型为Any，因为它是一个对象字面值。而不是依靠duck-typing来确保通过更改检测来获取对象的新版本，为什么不为它创建一个接口。

interface Album{
     title: string; 
     editableImageList: EditableImage[]; 
     description: string; 
     fromDate: string
}

然后

newAlbum: Album;

并在您的订阅中：

this.newAlbum = <Album>{
   title: 'My new album',
   editableImageList,
   description: null,
   fromDate: String(moment().year())
};

这可能有助于跟踪属性的变化检测，因为它属于众所周知的类型

使用'rxjs / observable / zip'在Angular中将null属性赋值给对象时查看不更新

1 个答案: