Estou seguindo o código do capítulo 4 da aula 2 porém encontro o seguinte erro com a diretiva ngFor:
compiler.js:1021 Uncaught Error: Template parse errors: Can't bind to 'ngForOf' since it isn't a known property of 'ap-photo'.
- If 'ap-photo' is an Angular component and it has 'ngForOf' input, then verify that it is part of this module.
- If 'ap-photo' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ngfor vai pegar o objteo photos criado no app.com.ts e guarda na variavel photo --> <ap-photo [ERROR ->]*ngFor="let photo of photos" [url]="photo.url" [description]="photo.description"> "): ng:///PhotosModule/PhotoListComponent.html@2:4 Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". (" [ERROR ->]<ap-photo *ngFor="let photo of photos" [url]="photo.url" "): ng:///PhotosModule/PhotoListComponent.html@1:0 at syntaxError (compiler.js:1021) at TemplateParser.push../nodemodules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14830) at JitCompiler.push../nodemodules/@angular/compiler/fesm5/compiler.js.JitCompiler.parseTemplate (compiler.js:24018) at JitCompiler.push../nodemodules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileTemplate (compiler.js:24005) at compiler.js:23948 at Set.forEach () at JitCompiler.push../nodemodules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileComponents (compiler.js:23948) at compiler.js:23858 at Object.then (compiler.js:1012) at JitCompiler.push../nodemodules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)
photo-list.component
@Component({
selector: 'app-photo-list',
templateUrl: './photo-list.component.html',
styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {
photos: any[] = [];
constructor(private photoService: PhotoService) { }
ngOnInit(): void {
this.photoService
.listFromUser('flavio')
.subscribe(photos => this.photos = photos);
}
}
photo-list.component.html
<ap-photo
*ngFor="let photo of photos"
[url]="photo.url"
[description]="photo.description">
</ap-photo>
photo.component
import { Component, Input } from "@angular/core";
@Component({
selector: 'ap-photo',
templateUrl: 'photo.component.html'
})
export class PhotoComponent {
@Input() description = '';
@Input() url = '';
}
photo.component.html
<img class="img-thumbnail" [src]="url" [alt]="description">
photos.module
@NgModule({
declarations: [
PhotoComponent,
PhotoListComponent
],
imports:[HttpClientModule]
})
export class PhotosModule{}