[英]Angular: *ngFor not showing list of components
我是Angular / MEAN的新手。 我正在學習教程,那里沒有問題。 但是,現在我正在制作自己的應用程序,但它無法正確呈現-我無法弄清楚問題出在哪里。
所以我有一個模型+組件'ENTRY'。 我正在嘗試在我的應用程序中顯示2個測試條目(在AppComponent-constructor中創建+放入數組中),但未顯示。
// entry.model.ts
import { Segment } from '../segment/segment.model';
import { Marker } from '../marker/marker.model';
export class Entry {
private _id: string;
private _title: string;
private _description: string;
private _dateCreated: Date = new Date();
private _dateLastModified;
private _contents : string;
constructor(title : string, description : string, contents : string){
this._title = title;
this._description = description;
this._contents = contents;
}
public get title() : string {
return this._title;
}
get description() : string {
return this._description;
}
get contents() : string {
return this._contents;
}
}
// entry.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Entry } from './entry.model';
@Component({
selector: 'app-entry',
templateUrl: './entry.component.html',
styleUrls: ['./entry.component.css']
})
export class EntryComponent implements OnInit {
@Input() public entry: Entry;
constructor() { }
ngOnInit() {
}
}
// entry.component.html
<p>
This entry is called {{title}}.
Its description is {{description}}.
its contents are {{contents}}.
</p>
// app.component.ts
import { Component } from '@angular/core';
import { Entry } from './entry/entry.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
private _entries = new Array<Entry>();
constructor() {
const entry1 = new Entry("My Title",
"This is an overly long description intended as an example, capiche?",
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.");
this._entries.push(entry1);
const entry2 = new Entry("My second title",
"Some other description for testing purposes.",
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit.");
this._entries.push(entry2);
}
}
// app.component.html
<!-- This one works, in that the html gets rendered but without any properties -->
<app-entry></app-entry>
<!-- All these other ones don't do anything -->
<div *ngFor='let currEntry of entries'>
<app-entry></app-entry>
</div>
<app-entry *ngFor='let entry of entries'>
{{entry}}
</app-entry>
<app-entry *ngFor='let currEntry of entries'
[entry]='currEntry'></app-entry>
<div>
<ul>
<li *ngFor='let currEntry of entries'>
<app-entry [entry]='currEntry'></app-entry>
</li>
</ul>
</div>
有人知道我做錯了嗎? 我將不勝感激任何幫助。
我想為了從視圖訪問條目輸入字段(屬性),您應該這樣做
<p *ngIf="entry" >
This entry is called {{entry.title}}.
Its description is {{entry.description}}.
its contents are {{entry.contents}}.
</p>
您還需要在應用程序組件中將_entries更改為條目或其他方式(例如,用戶@ user184994指出)
編輯:添加了ngIf並且它可以工作
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.