Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Erro! Can't bind to 'ngForOf' since it isn't a known property of 'ap-photo'

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'.

  1. If 'ap-photo' is an Angular component and it has 'ngForOf' input, then verify that it is part of this module.
  2. If 'ap-photo' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. 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{}
1 resposta
solução!

Resposta na aula 5 do capítulo 4!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software