Ao tentar executar o ng serve -o, estou recebendo esse erro de compilação abaixo:
Error: src/app/photos/photo-list/photo-list.component.html:5:2 - error NG8002: Can't bind to 'url' since it isn't a known property of 'app-photo-list'.
5 [url]="photo.url"
~~~~~~~~~~~~~~~~~
src/app/photos/photo-list/photo-list.component.ts:7:16
7 templateUrl: './photo-list.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component PhotoListComponent.Abaixo está o código do PhotoListComponent
import { Component, OnInit } from '@angular/core';
import { Photo } from '../photo/photo';
import { PhotoService } from '../photo/photo.service';
@Component({
selector: 'app-photo-list',
templateUrl: './photo-list.component.html',
styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {
// avoid any runtime error if ngOnInit() is not defined correctly
photos: Photo[] = [];
// Using the Constructor only for Dependence Injections
constructor(private service: PhotoService) {
}
// Any setup needed its going to be done here
// Phase On Init occurs after Instacialization and after this component receive the Inbound properties.
ngOnInit(): void {
this.service.listFromUser('flavio')
.subscribe(
// Observable is a Lazy object. It will not access the URL unless there is an Observer.
photos => {
console.log(photos);
console.log(photos[0].description);
this.photos = photos;
}
);
}
}
Abaixo está o código do PhotoList Template:
<p>photo-list works!</p>
<app-photo-list
*ngFor="let photo of photos"
[url]="photo.url"
>
</app-photo-list>Abaixo está o PhotoModule, já contendo o Import para o CommonModule:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { PhotoComponent } from './photo/photo.component';
import { PhotoListComponent } from './photo-list/photo-list.component';
@NgModule({
declarations: [
PhotoComponent,
PhotoListComponent
],
exports: [PhotoComponent],
imports: [
HttpClientModule,
CommonModule
]
})
export class PhotosModule {
}Tentei as soluções mais óbvias, como alterar o Tipo do atributo do PhotoListComponent de Photo[] para any[], sem sucesso.
Onde estou errando e como corrigo esse bug?
O código com o Bug está commitado no Branch abaixo:
