爲什麼添加這個組件打破了很多東西？ （大量的東西將被下文定義）

Question

我具有以下所示的3個組分：

新聞feed.component

用戶活動-item.component

用戶activity-list.component

這兩個用戶活動組件都位於news-feed組件的子目錄中。此外，用戶活動項目只是用戶活動列表的成員。

一切與此工作，直到我的組件選擇CG-用戶活動列表添加到新聞feed.component.html文件。

一旦我添加該行，我導航到的路線將顯示news-feed.component.html中的文本，但活動列表從不顯示。另外，出於某種原因，URL欄中的路線很快顯示，就像它成功地將其放到頁面中一樣，然後返回到前一個路線（但保留在我打算的頁面上）。

我對Angular2非常陌生，所以我希望有人能立即發現我的錯誤，但我一直在看這幾個小時，並且一直沒有看到問題。

這裏是我的文件：

新聞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() { 
    } 

} 

新聞feed.component.html

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

用戶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() { 
    } 

} 

用戶activity.item.component.html

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

用戶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() { 
    } 

} 

用戶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> 

如果我需要發佈有關該項目的更多信息，我可以，但它相當大，所以我不能100％確定需要發佈什麼信息才能看到問題。

---

附加信息。

• 控制檯錯誤下面

  例外：未捕獲的（在承諾）：錯誤：錯誤./UserActivityItemComponent類UserActivityItemComponent - 聯模板：2：8引起的：無法讀取屬性 '名' 未定義 類型錯誤：不能在_View_UserActivityItemComponent0.AppView.detectChanges在_View_UserActivityItemComponent0.detectChangesInternal（/AppModule/UserActivityItemComponent/component.ngfactory.js:51:66） 讀的不確定 屬性 '名稱'（http://localhost:4200/main.bundle.js:56495:14） 在_View_UserActivityItemComponent0.D ebugAppView.detectChanges（http://localhost:4200/main.bundle.js:56600:44） 在_View_UserActivityListComponent0.AppView.detectViewChildrenChanges（http://localhost:4200/main.bundle.js:56521:19） 在_View_UserActivityListComponent0.detectChangesInternal（/AppModule/UserActivityListComponent/component.ngfactory.js:52:8） 在_View_UserActivityListComponent0.AppView.detectChanges（http://localhost:4200/main.bundle.js:56495:14） 在_View_UserActivityListComponent0 .DebugAppView.detectChanges（http://localhost:4200/main.bundle.js:56600:44） 在_View_NewsFeedComponent0.AppView.detectViewChildrenChanges（http://localhost:4200/main.bundle.js:56521:19） 在_View_NewsFeedComponent0.detectChangesInternal（/AppModule/NewsFeedComponent/component.ngfactory.js:61:8） 在_View_NewsFeedComponent0.AppView.detectChanges（http://localhost:4200/main.bundle.js:56495:14）

Answer 1

你最後的代碼片。我認爲這是問題。

用戶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