Question

美好的一天！这是我在Angular（＆amp; Ionic）上的第一个项目，我尝试按照本书中的示例构建它。没有提供可下载的源代码，因此我无法与原始代码进行比较并追踪错误。

当我运行我的代码时，我在控制台日志中看到了这个错误。

错误：未捕获（在承诺中）：错误：模板解析错误：无法绑定到＆＃39;事件＆＃39; ，因为它不是＆＃39; event＆＃39; 的已知属性。（＆＃34; ] [事件] =＆＃34;事件＆＃34;＆GT; ＆＃34;）：ng：///AppModule/EventListPage.html@6:24 ＆＃39;事件＆＃39;不是一个已知元素：

我检查了我的组件和页面模板两次，但仍然很难发现我的错误。如果您指出错误，将非常感激。该项目的完整代码已上传到gitHub https://github.com/eaailkal/baahandbook/tree/master/src

Here is the image with example, which I was following

提前谢谢你：）

这是页面 event-list.html 模板代码

＆＃13;

<ion-header>
  <ion-navbar>
    <ion-title>Events</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <event *ngIf="events" [events]="events"></event>
</ion-content>

＆＃13;

event-list.ts 代码

＆＃13;

import { Component, OnInit, OnDestroy } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Subscription } from "rxjs";
import { Events } from '../../model/Events';
import { EventsService } from '../../providers/events-provider';

@Component({
  selector: 'event-list',
  templateUrl: 'event-list.html'
})
export class EventListPage implements OnInit, OnDestroy {
  events: Events;
  subscription: Subscription;
  
  constructor(public navCtrl: NavController, private eventService: EventsService) {}

  ngOnInit(): void {
    this.subscription = this.eventService.load(0, 10).subscribe(events =>
this.events = events);
  }

  ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
} }

＆＃13;

以下是 events-provider.ts 代码

＆＃13;

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import * as isEqual from 'lodash.isequal';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/distinctUntilChanged';
// import { AngularFire } from 'angularfire2';

import { AngularFireDatabase } from 'angularfire2/database';
import { Events } from '../model/Events';

@Injectable()
export class EventsService {
  constructor(private db: AngularFireDatabase) {
  }
  load(offset: number = 0, limit: number = 10): Observable<Events> {
    return this.db.list('/events')
      .map(ids => ids.slice(offset, offset + limit).map(v => v.$value))
      .distinctUntilChanged(isEqual)
      .map((ids: any[]) => ids.map(id => this.db.object('/'
+ id)))
      .map(events => ({
        offset,
        limit,
        total: limit,
        results: events,
})); }
}

＆＃13;

我的2个组件在下面提供

event.ts 和 event.html 组件

＆＃13;

import { Component, Input } from '@angular/core';
import { Event } from '../../model/Event';

// import AngularFire and FirebaseListObservable modules 
// from the AngularFire 2 library to provide bindings to Firebase
// import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';


@Component({
  selector: 'event',
  templateUrl: 'event.html'
})
export class EventComponent {
  @Input() event: Event;
}

＆＃13;

<div *ngIf="!event">
  Loading...
</div>

<div *ngIf="event">
  <h2 class="title">{{ event.title }}</h2>
  <div>
    <span>
      <ion-icon name="time"></ion-icon>{{ event.date }} - {{ event.time }}
    </span>
    <span>
      <ion-icon name="person"></ion-icon>
      {{ event.location }}
    </span>
    <span>
      <ion-icon name="bulb"></ion-icon>
      {{ event.description }}
    </span>
  </div>

  <div>
    <span>
      <ion-icon name="link"></ion-icon>
      {{ event.url }}
    </span>
  </div>
</div>

＆＃13;

events.ts 和 events.html 组件

＆＃13;

import { Component, Input } from '@angular/core';
import { Events } from '../../model/Events';


@Component({
  selector: 'events',
  templateUrl: 'events.html'
})

export class EventsComponent {
  @Input() events: Events;
}

＆＃13;

<ion-list *ngIf="events.results.length > 0">
  <ion-item *ngFor="let event of events.results">
    <event [event]="event | async"></event>
  </ion-item>
</ion-list>
<p *ngIf="events.results.length === 0">
  No events.
</p>

＆＃13;

event.ts 型号

＆＃13;

export interface Event {
  id: number;
  title: string;
  time: number;
  date: number;
  description: string;
  location: string;
  url: string;
}

＆＃13;

events.ts 型号

＆＃13;

import { Observable } from 'rxjs';
import { Event } from './Event';

export interface Events {
  offset: number;
  limit: number;
  total?: number;
  results: Observable<Event>[];
}

＆＃13;

Answer 1

您错过了@Input

中的一个 s

import { Component, Input } from '@angular/core';
import { Event } from '../../model/Event';

// import AngularFire and FirebaseListObservable modules 
// from the AngularFire 2 library to provide bindings to Firebase
// import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';


@Component({
  selector: 'event',
  templateUrl: 'event.html'
})
export class EventComponent {
  @Input() events: Event; <-----change here
}

或从您的event-list.html

中删除一个 s

<event *ngIf="events" [event]="events"></event>

Answer 2

我找到了解决问题的方法。刚刚浏览了 app.module.ts ，发现我的两个组件都没有导入。

角度解析错误 - 无法绑定到...因为它不是

2 个答案: