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

Can't bind to 'NgForOf' since it isn't a known property of 'li'

Estou fazendo uma aplicação e mesmo depois de adicionar ao meu módulo o CommonModule

import { CommonModule } from '@angular/common';

Ainda estou recebendo o erro

Can't bind to 'NgForOf' since it isn't a known property of 'li'

O projeto está no repositório: https://github.com/wferreira1/sempre-charme

Esse é o arquivo navbar.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { NavbarComponent } from './navbar.component';

@NgModule({
  declarations: [
    NavbarComponent
  ],
  imports: [
    CommonModule
  ],
  providers: [],
  bootstrap: [NavbarComponent]
})
export class NavbarModule { }

navbar.component.ts

import { Component, OnInit } from '@angular/core';

import { Opcoes } from './navbar.opcoes.interface';
import { ClienteInterface } from '../cliente/cliente.interface';

@Component({
  selector: 'sc-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent implements OnInit {

  public cliente: ClienteInterface = <ClienteInterface>{};
  public title: string = '';
  public opcoes: Opcoes[] = [];

  constructor() { }

  ngOnInit() {

    this.title = 'Inicio';

    this.cliente = <ClienteInterface>{nome: 'Wesley', login: 'wesleyoliveira@e.com.br', photo: 'https://goo.gl/LLBW21', empresa: 'Sempre Charme'};

    if(! <number>this.opcoes.length ){
        this.opcoes = <Opcoes[]>[{
          name: "Marcar Hor&aacute;rio",
          link: "#",
          icon: "access_time",
          onMobile: true
        },{
          name: "Hist&oacute;rico",
          link: "#",
          icon: "hourglass_empty",
          onMobile: true
        },{
          name: "Pagamento",
          link: "#",
          icon: "credit_card",
          onMobile: true
        },{
          name: "Pacotes",
          link: "#",
          icon: "shopping_basket",
          onMobile: true
        },{
          name: "Perfil",
          link: "#",
          icon: "#",
          onMobile: false
        },{
          name: "Ajuda",
          link: "#",
          icon: "help",
          onMobile: true
        },{
          name: "Configura&ccedil;&otilde;es",
          link: "#",
          icon: "settings",
          onMobile: true
        }];
    }
  }

}
1 resposta
solução!

Oi Wesley, Algumas considerações sobre seu projeto:

  • No template navbar.component.html, todas as diretivas do common module estão com o "n" inicial em maiúsculo. Ao invés de "NgFor", o correto é "ngFor".
  • No navbarModule você precisa exportar o componente NavbarComponent, uma vez que ele será utilizado pelo appComponent.
  • Há um ngif em que você fez uma atribuição, quando o correto seria o operador == *ngIf="opcao.name == 'Ajuda'"

Espero ter ajudado!

Atenciosamente, Jailson da Silveira