Vue non mise à jour lors de l'affectation de la propriété null à l'objet dans Angular en utilisant 'rxjs/observable/zip'

Question

J'ai un problème avec mon affichage n'étant pas mis à jour une fois que mon composant a mis à jour une propriété/variable locale.

Dans mon code de composant, je crée une propriété 'newAlbum' et l'affecte à l'origine à null. Plus tard, lors de l'appel d'une méthode dans mon composant appelé openCreateForm Je souhaite attribuer des valeurs à ma propriété « NewAlbum » et souhaite ensuite mettre à jour mon point de vue à l'aide d'un simple *ngIf

Ce code est dactylographiée dans mon élément ...

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()) 
     }; 
    }); 
} 

ce qui est le code HTML dans mon modèle de composant (dans un fichier externe)

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

Lors du débogage dans Outils Chrome Dev et la cuisson de la méthode openCreateForm avec les bons arguments du this.newAlbum est correctement affecté les propriétés correctes et n'est plus nulle ... cependant ma vue n'est pas mise à jour. Dois-je basculer entre certains DIVs sur mon interface le *ngIf="newAlbum" fonctionne correctement lors du retour ou de la commutation des onglets dans ma vue. Pouvez-vous me donner une idée de la raison pour laquelle la mise à jour n'est pas lancée ou de ce que je pourrais faire pour forcer la mise à jour? Un grand merci

Si l'un des éléments ci-dessus n'a pas de sens, veuillez l'indiquer et je reformulerai la question ... merci encore une fois.

Answer 1

newAlbum est de type Any car il s'agit d'un objet littéral. Plutôt que de compter sur le typage du canard pour vous assurer que votre nouvelle version de l'objet est détectée par la détection des changements, pourquoi ne pas créer une interface pour cela.

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

puis

newAlbum: Album; 

et dans votre abonnement:

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

Cela peut aider à suivre le changement de détection de la propriété, comme il est d'un type bien connu