Angular 2 *ngFor не работает

Ниже приведен мой компонент:

import { Component } from 'angular2/core';

@Component({
  selector: 'test',
  template: 
     `
      <ul >
        <li *ngFor="let t of test">
         <span >{{t}}</span>
        </li>
      </ul>
     `
})

export class TestComponent implements OnInit{
  test: string[];
  constructor(){
    this.test = ["Saab", "Volvo", "BMW"];
  }
}

Я получаю следующую ошибку, когда пытаюсь загрузить компонент:

  EXCEPTION: Template parse errors:
    Can't bind to 'ngFor' since it isn't a known native property ("<ul >
        <li [ERROR ->]*ngFor="let t of test">
            <span >{{t}}</span>
        </li>
    "):

Кроме того, я не уверен, следует ли мне использовать «@angular/core» или «angular2/core» при импорте Component.


javascript angular ngfor
person UnderWood    schedule 14.06.2016    source источник
comment
@angular/core происходит от релиз-кандидата и является более поздним. Не уверен, почему вы увидите эту ошибку.   -  person Katana314    schedule 15.06.2016
comment
Какую версию Angular2 вы используете?   -  person Thierry Templier    schedule 15.06.2016
comment
Думаю, вам следует импортировать из @angular/core, если вы используете 2.0.0-rc.1   -  person CryptoCarl39    schedule 15.06.2016
comment
Я пытаюсь использовать Angular2 в своем приложении Electron. Я настроил среду, следуя этим рекомендациям: xplatform.rocks/2016/02/14/ Но он использует angular/core. Если я изменю package.json, чтобы импортировать из @angular/core. Какие изменения нужно внести в файл gulp. Я не мог понять, какие все файлы нужно скопировать в папку dist. Было бы очень полезно, если бы вы могли пролить свет на это. Спасибо   -  person UnderWood    schedule 15.06.2016
comment
Вместо этого вы можете попробовать *ng-for. Если это работает, значит, у вас действительно старая версия Angular2.   -  person Günter Zöchbauer    schedule 15.06.2016

Ответы (6)


arrow_upward
12
arrow_downward

Проблема может возникнуть из-за того, что вы не импортировали общий модуль в текущий используемый вами модуль.

попробуй импорт

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

в свой текущий модуль и посмотрите, устранена ли проблема.

общий модуль добавляет все встроенные директивы из angular 2.

см. документацию по commonModule от angular.io

надеюсь, это поможет :)

person razma    schedule 22.05.2017

arrow_upward
1
arrow_downward

Я столкнулся с той же проблемой, после долгих поисков и испытаний я только что обнаружил, что забыл объявить свой компонент в «объявлениях» в модуле.

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

import { SearchComponent } from './search.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: SearchComponent },
    ])
  ],
  exports:[
  ],
  declarations: [
    SearchComponent 
  ],
})
export class SearchModule { }

person KLMN    schedule 19.05.2020
comment
О боже, это для меня. Не могли бы вы объяснить, если знаете, почему это так? Почему страница работает правильно, а файл *ngFor. Я очень новичок в angular. - person Nic Parmee; 17.01.2021
comment
@NicParmee Я не уверен, но я нашел этот ответ довольно ясным stackoverflow.com/a/40037641/560773 - person KLMN; 18.01.2021

arrow_upward
0
arrow_downward

Я испытал подобное поведение. Проблема заключалась в том, что я включал минимизированную версию Angular 2 в свой HTML.

Если это так, попробуйте включить неминимизированный файл Angular

person Andrea Ialenti    schedule 14.06.2016

arrow_upward
0
arrow_downward

Использование Let решило проблему для меня

<ul>
   <li *ngFor = "let test of testArray">{{test}}</li>
</ul>

person user2962072    schedule 28.11.2016

arrow_upward
0
arrow_downward

Ваш шаблон должен быть:

<ul>
    <li *ngFor="#t of test">
        <span >{{t}}</span>
    </li>
</ul>

Или так в более новых версиях:

<ul>
    <li *ngFor="let t of test">
        <span>{{t}}</span>
    </li>
</ul>
person Guido    schedule 14.06.2016
comment
Использование # в ngFor больше не рекомендуется, и все его использование должно быть преобразовано в «let». - person Harry Ninh; 15.06.2016
comment
@UnderWood, значит, у вас устаревшая версия Angular2. - person Günter Zöchbauer; 15.06.2016
comment
@HarryNinh Я прокомментировал это, потому что он импортирует библиотеку angular2/core. Поэтому он должен использовать шаблон таким образом. Чтобы использовать 'let', он должен импортировать '@angular/core' - person Guido; 15.06.2016
comment
Понял! Я использовал устаревшую версию Angular2. Теперь это работает для меня. Спасибо всем! - person UnderWood; 15.06.2016

arrow_upward
0
arrow_downward

Для меня проблема заключалась в том, что я использовал Webpack с загрузчиком HTML, который минимизировал HTML до того, как Angular смог его скомпилировать, тем самым удалив * из ngFor.

{
    test: /\.html$/,
    use: [ {
        loader: 'html-loader',
        options: {
        //minimize: true, // Make sure that you are not minimizing when using Angular
        removeComments: false,
        collapseWhitespace: false
    }
}
person MotKohn    schedule 31.05.2018