如何将自定义对象赋予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>

Answer 3

事实是，在角形钩子（NgOnInit，AfterView等）中，您不知道什么时候解析了哑组件的输入。

所以最好的方法是这样设置：

@Input() set(counter: Counter) {

if(!counter) {
return;
}

//do your logic here
this.calculateCUrrentDate(); // my method for calculate the time
console.log(counter);

}

其他输入也一样，因此，如果您需要在html中使用该计数器，则需要在该哑组件中具有局部变量，并在为它分配值以触发以html呈现后调用更改检测。

PS：我建议您从html中的angular使用Elvis运算符，例如

counter.somehting将在某些时候未定义计数器的情况下破坏您的应用程序。

因此，例如，在这里您应该在整个应用程序中使用它：

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