Question

我刚开始学习Angular 2而且我一直坚持制定通用指令。我正在使用Angular版本2.1.1，我收到错误Can't bind to 'ngforOf' since it isn't a known property of 'li'.同样会转到*ngIf和其他指令。

我从类似的问题中读到了一些最相关的提示：

1. 请务必在视图中use the correct spelling and casing指示，ng-if应为*ngIf等。
1. 在根模块中导入BrowserModule，在要使用通用指令的其他模块中导入CommonModule。 Link

到目前为止，以下是我的代码实现这些建议修补程序的部分内容：

approot.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, RequestOptions } from '@angular/http';
import { AuthRequestOptions } from '../services/auth.request.options';

import { AppComponent } from '../approot/approot.component';
import { AppRoutingModule } from './approot.routing.module';

import { DashboardModule } from '../dashboard/dashboard.module';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    DashboardModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    {provide: RequestOptions, useClass: AuthRequestOptions}
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

dashboard.module.ts

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

import { DashboardRoutingModule } from './dashboard.routing.module';
import { DashboardComponent } from './dashboard.component';
import { DashboardHomeComponent } from './dashboard-home.component';

@NgModule({
  imports: [
    CommonModule,
    DashboardRoutingModule,
  ],
  declarations: [
    DashboardComponent,
    DashboardHomeComponent
  ],
})

export class DashboardModule { }

dashboard.component.ts （我要使用的地方*ngFor）

import {Component} from "@angular/core";
import {ListService} from "../services/list.service";
import {ListModel} from "../models/list.model";

@Component({
  templateUrl: '/views/dashboard/views/dashboard.html',
  providers: [
    ListService
  ],
  styleUrls: ['../css/dashboard/styles/dashboard.css']
})

export class DashboardComponent {

  lists: Array<ListModel>;

  constructor (private listService: ListService) {
    this.lists = [];
  }

  ngOnInit () {
    console.log(this.lists);
    this.listService.getLists().subscribe(
      (data) => {
        this.lists = data;
        console.log(this.lists);
      }
    );
  }
}

修改 dashboard.html

<div class="row">
  <div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
      <li class="active">
        <a>My Lists</a>
      </li>

      <li *ngFor="let list of lists">
        <a href="#">{{list.name}}</a>
      </li>

    </ul>
  </div>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <router-outlet></router-outlet>
  </div>
</div>

我还尝试在BrowserModule中导入CommonModule而不是dashboard.module.ts，但仍然没有运气。

我了解到以前的angular2 beta版本在directive中有@Component()属性，并且应该在那里声明指令以便可以解析它们。这已在当前版本的角度中弃用，我想知道这是否与此错误有关，角度无法识别常见指令。

非常感谢任何帮助。

Answer 1

好的，我的错。很抱歉打扰了他们。我使用definition of IMailContentProducer interface IMailContentProducer { String getUserName(), String getPassword(), String getSubject(), String getSubject(), String getToList(), //etc... }插件修改了模板的内容。我只需要将gulp-htmlmin添加到{caseSensitive: true}选项以允许自定义元素属性。谢谢大家的努力。

Angular 2 - 像ngIf，ng这样的常用指令不起作用

1 个答案: