À l'aide de la Machine, et de l'Objet.attribuer me donne une erreur "propriété" assigner "n'existe pas sur le type "ObjectConstructor'"

Question

Je suis en train d'écrire ma question encore une fois parce que plus tôt, il n'a guère de sens et je n'étais pas très clair.

Je suis de la réception de données à partir de l'API qui ressemble à quelque chose comme ceci:

{"photos":[{"id":1,"title":"photo_1_title"}]}

Donc, dans mon code, j'ai un photos variable, et une méthode appelée getPhotos()

Je suis à l'aide de défilement infini, donc quand j'arrive en bas de la page, j'appelle getPhotos() de nouveau.

photos: any;

getPhotos() {
  this.photoService.getPhotos()
    .subscribe(
      photos => this.photos = photos
      // here, instead of doing this, I want to add the array of photos I get back to this.photos using Object.assign however it is giving me the said error
    )
}

Donc, si la prochaine fois je l'appelle, je remonte {"photos":[{"id":2,"title":"photo_2_title"}]}, alors que je suis en train de mettre this.photos à

{"photos":[{"id":1,"title":"photo_1_title"}, {"id":2,"title":"photo_2_title"}]}

quelqu'un peut-il m'aider à comprendre pourquoi
jsfiddle.net/ca46hLw9 ne fonctionne pas? J'ai pensé à attribuer est censé fusionner le contenu d'un objet de droit?

Answer 1

Object.assign est un ECMAScript2015 fonction et n'existe pas dans ECMAScript5 et inférieur.

Vous êtes le plus susceptible de ciblage pour compiler votre Tapuscrit pour ECMAScript5 et à cet effet, l'interface d'un Objet n'a pas de assign défini.

Vous pouvez soit la cible ECMAScript2015 en changeant votre TS compilateur de configuration avec

target: 'es6'

ou vous pouvez étendre la ObjectConstructor interface avec la méthode assign

declare interface ObjectConstructor {
    assign(...objects: Object[]): Object;
}

(vous pouvez ajouter cette déclaration n'importe où, redeclaring une interface étend plutôt que de l'écraser)

Ou vous pouvez contraindre Object de any et d'ignorer ses tapant:

(<any>Object).assign( this.photos, photos )

Selon que vous choisissez, gardez à l'esprit que si vous voulez que cela fonctionner sur les anciens navigateurs, vous devez ajouter un polyfill. La plupart des navigateurs modernes sont assez proches de la mise en œuvre de la ES2015 ensemble de fonctionnalités, mais ils ne sont pas à 100% là, ce qui signifie que certaines parties de votre code va encore échouer si vous comptez sur ES2015 fonctionnalité.

La machine ne sera pas polyfill Object.assign lorsque cibler ES5 ou plus, c'est pourquoi vous obtenez cette erreur. D'autre part, Babel n'ont polyfills sous la forme de plugins, ce qui signifie que vous devez intégrer Babel transpilation dans votre build pipeline, voir: https://babeljs.io/docs/plugins/transform-object-assign/

Comme une dernière option que vous pouvez envisager d'utiliser une bibliothèque comme Lodash ou jQuery, qui ont leur propre mise en œuvre de l' Object.assign (appelés extend)

Answer 2

Avec la Machine 2.1 ou supérieur, vous pouvez utiliser l'Objet de la propagation de la syntaxe à la place.

let obj = { x: 1, y: "string" };
var newObj = {...obj, z: 3, y: 4}; // { x: number, y: number, z: number }

L'ordre de la spécification de la propagation des opérations détermine quelles sont les propriétés à la fin dans l'objet; propriétés en s'écarte plus tard "gagner" auparavant créé propriétés.