为什么添加这个组件会破坏很多东西？(大量内容将在下面定义)

Question

我有以下三个组成部分：

news-feed.component

user-activity-item.component

user-activity-list.component

两个用户活动组件都位于新闻提要组件的子目录中。此外，用户活动项，只是用户活动列表的一个成员.

这一切都可以工作，直到我将组件选择器cg-user-activity-list添加到news-feed.component.html文件。

一旦我添加了这一行，我导航到的路径就会显示新闻中的文本- never .Component.html，但是活动列表永远不会显示。另外，由于某种原因，URL栏中的路由很快显示出来，就像它成功地到达页面一样，然后返回到以前的路由(但停留在我想要的页面上)。

我对Angular2非常陌生，所以我希望有人能立即发现我的错误，但我已经看了几个小时了，还没有发现问题。

这是我的档案：

news-feed.component.ts

import { Component, OnInit } from '@angular/core';
import { UserActivityListComponent } from './user-activity-list/user-activity-list.component';

@Component({
  selector: 'cg-news-feed',
  templateUrl: './news-feed.component.html',
  styleUrls: ['./news-feed.component.css']
})
export class NewsFeedComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

news-feed.component.html

<div class="pure-u-1">
    Activity Test Text
    <cg-user-activity-list></cg-user-activity-list>
</div>

user-activity.item.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { UserActivity } from '../user-activity';

@Component({
  selector: 'cg-user-activity-item',
  templateUrl: './user-activity-item.component.html'
})
export class UserActivityItemComponent implements OnInit {
  @Input() userActivity: UserActivity;

  constructor() { }

  ngOnInit() {
  }

}

user-activity.item.component.html

<div class="pure-u-1">
    testing user activity item component
    <h4>{{userActivity.name}}</h4>
    <p>{{userActivity.id}}</p>
</div>

user-activity.list.component.ts

import { Component, OnInit } from '@angular/core';
import { UserActivity } from '../user-activity';
//import { UserActivityItemComponent } from './user-activity-item.component';

@Component({
  selector: 'cg-user-activity-list',
  templateUrl: './user-activity-list.component.html'
})
export class UserActivityListComponent implements OnInit {
  userActivities: UserActivity[] = [];
  userActivity = new UserActivity('John', '25');

  constructor() { }

  ngOnInit() {
  }

}

user-activity.list.component.html

<div class="pure-u-1">
  testing user activity list component
  <cg-user-activity-item> [userActivity]="userActivity" </cg-user-activity-item>
</div>

如果我需要发布更多关于这个项目的信息，我可以，但是它是相当大的，所以我不能百分之百肯定我需要发布什么来让别人看到这个问题。

附加信息.

• 控制台错误 例外: Uncaught (承诺)：Error：./UserActivityItemComponent类中的错误-内联模板:2:8由:无法读取未定义的TypeError的属性“名称”：无法读取未定义的属性的“名称”在_View_UserActivityItemComponent0.detectChangesInternal (/AppModule/UserActivityItemComponent/component.ngfactory.js:51:66) at _View_UserActivityItemComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56495:14) at _View_UserActivityItemComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:56600:44) at _View_UserActivityListComponent0.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:56521:19)_View_UserActivityListComponent0.detectChangesInternal (/AppModule/UserActivityListComponent/component.ngfactory.js:52:8) at _View_UserActivityListComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56495:14) at _View_UserActivityListComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:56600:44) at _View_NewsFeedComponent0.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:56521:19) at _View_NewsFeedComponent0.detectChangesInternal (/AppModule/NewsFeedComponent/component.ngfactory.js:61:8) at _View_NewsFeedComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:56495:14)

Answer 1

你最后一段代码。我相信这就是问题所在。

user-activity.list.component.html

<div class="pure-u-1">
  testing user activity list component
  <cg-user-activity-item> [userActivity]="userActivity" </cg-user-activity-item>
</div>

应：

<cg-user-activity-item [userActivity]="userActivity"></cg-user-activity-item>

我可能错了，很难分辨出是怎么回事。如果您可以从控制台添加错误，那就太好了。

编辑

您的userActivity似乎还没有加载，请尝试：

<div class="pure-u-1">
    testing user activity item component
    <h4>{{userActivity?.name}}</h4>
    <p>{{userActivity?.id}}</p>
</div>

或者您可以将*ngIf="userActivity"添加到您的div中。