Angular: * ng для не показа списка компонентов - PullRequest
Новая
       11

Angular: * ng для не показа списка компонентов

0 голосов
/ 29 апреля 2018

Я новичок в 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>

Кто-нибудь знает, что я сделал не так? Буду очень признателен за любую помощь.

1 Ответ

0 голосов
/ 29 апреля 2018

Я думаю, что для доступа к входным полям ввода (реквизита) из представления вы должны сделать это так 

<p *ngIf="entry" >
  This entry is called {{entry.title}}.
  Its description is {{entry.description}}.
  its contents are {{entry.contents}}.
</p>

вам также нужно изменить _entries на entry или наоборот в компоненте приложения (как указано в user @ user184994)

edit: добавлено ngIf, и оно работает

...