如何为自定义对象提供Angular组件？

Question

我有一个显示计数器的小应用程序，其中包含事件和实际日期之间的天数。我是为学习Angular而设计的。

我有一个计数器列表，每个计数器都有自己的视图，可以在未来的列表中看到。我想删除一个计数器，但是对于该任务，我需要将对象赋予客户角度组件。但是，当我尝试检索它时，我的组件是不确定的。 Angular只能给出基本类型吗？

我的柜台型号：

    export class Counter {
      picture: string;
      synopsis: string;
      constructor(public title: string, public date: Date) {
      }
    }

我用该代码呼叫我的柜台清单：

     <div *ngFor="let counter of counters">
        <app-display-test title="{{ counter.title }}" 
                          date="{{ counter.date }}"
                          counter="{{counter}}">
        </app-display-test>
    </div>

我的显示模型：

    export class DisplayTestComponent implements OnInit {

      @Input() title: string;
      @Input() date: Date;
      @Input() counter: Counter;

      constructor() {
       }

      ngOnInit() {
        console.log(this.title);
        this.calculateCUrrentDate(); // my method for calculate the time
        console.log(this.counter);
        console.log(this.date);
      }
    }

在ngOnInit方法中，标题和日期具有值，但计数器输入未定义，我不明白为什么

Answer 1

尝试这样：

Working Demo

TS：

counters = []

constructor() {
   this.counters.push(new Counter("test",new Date))
}

模板：

<div *ngFor="let counter of counters">
    <app-display-test [title]="counter.title" [date]="counter.date" [counter]="counter">
    </app-display-test>
</div>

Answer 2

您已使用字符串插值来传递对象。试试这个

<div *ngFor="let counter of counters">
    <app-display-test [title]="{{ counter.title }}" 
                      [date]="{{ counter.date }}"
                      [counter]="counter">
    </app-display-test>
</div>