0
202
Viewsproblema con la propiedad del objeto de acceso en TypeScript angular
Tengo un objeto mecanografiado como este
const playlist: { tracks: Array<Track> } = { tracks: new Array<Track>() };Y esta es la interfaz de seguimiento
interface Track { title?: string; album?: string; artists?: string; duration?: string; explicit?: boolean; url?: string; } Estoy tratando de obtener datos de la API web de Spotify para mi objeto de playlist de reproducción como este
for (let i = 1; i <= iterationCount; i++) { const endpointX = `${BASE_API_URL}playlists/${playlistId}/tracks?limit=${PLAYLIST_ITEM_LIMIT}&offset=${i}&fields=${fieldString}`; const subscription: Subscription = this.http.get<WritableTrackList>(endpointX).subscribe(data => { for (const item of data.items) { const track: Track = this.helperService.trackApiObject2TrackObject(item.track); this.playlist.tracks.push(track); } }); } Cuando intento imprimir el objeto de la playlist de reproducción en la consola de javascript con console.log(this.playlist); , esta funcionando. 
Pero trato de imprimir playlist.tracks con console.log(this.playlist.tracks); , imprime una matriz vacía
¿Por qué no puedo acceder a la propiedad de tracks del objeto de playlist de reproducción? ¿Cómo puedo acceder a esta propiedad? ¿Alguna solución?
2 answers
Answer question0
prueba esto :
console.log(this.playlist['tracks']); si desea usar this.playlist.tracks , debe declarar una interfaz para la lista de reproducción:
interface PlayList{ tracks:Track[] }0
tal vez intente imprimirlo dentro de la suscripción.
.subscribe(data => { for (const item of data.items) { const track: Track = this.helperService.trackApiObject2TrackObject(item.track); this.playlist.tracks.push(track); } console.log([...this.playlist.tracks]) }); // printing outside subscription will most likely give an empty arrayaunque en general querrías algo reactivo
tracks$ = this.http.get<WritableTrackList>(endpointX).pipe(map(trackApiObject2TrackObject));entonces en la plantilla
<ng-template ngFor let-track[ngForOf]="tracks$| async"> <app-track [track]></app-track> </ng-template>