Angular 如何将自定义对象指定给角度组件？_Angular_Object_Parameter Passing

Angular 如何将自定义对象指定给角度组件？

angular object

Angular 如何将自定义对象指定给角度组件？,angular,object,parameter-passing,Angular,Object,Parameter Passing,我有一个显示计数器的小应用程序，显示事件和实际日期之间的天数。我做它是为了学习我有一个计数器的列表，每个计数器都可以在列表中看到，将来会有自己的视图。我想删除一个计数器，但对于该任务，我需要为自定义角度组件提供一个对象。但当我试图检索它时，它是我的组件，它是未定义的。角度是否只能给出原语类型我的柜台型号：导出类计数器{ 图片：字符串；简介：字符串；构造函数（公共标题：字符串，公共日期：日期）{ } } 我用该代码调用我的计数器列表：我的显示模式：导出类DisplayTestC

我有一个显示计数器的小应用程序，显示事件和实际日期之间的天数。我做它是为了学习

我有一个计数器的列表，每个计数器都可以在列表中看到，将来会有自己的视图。我想删除一个计数器，但对于该任务，我需要为自定义角度组件提供一个对象。但当我试图检索它时，它是我的组件，它是未定义的。角度是否只能给出原语类型

我的柜台型号：

导出类计数器{
图片：字符串；
简介：字符串；
构造函数（公共标题：字符串，公共日期：日期）{
}
}

我用该代码调用我的计数器列表：

我的显示模式：

导出类DisplayTestComponent实现OnInit{
@输入（）标题：字符串；
@输入（）日期：日期；
@Input（）计数器：计数器；
构造函数（）{
}
恩戈尼尼特（）{
console.log（this.title）；
this.calculateCUrrentDate（）；//我的时间计算方法
console.log（this.counter）；
console.log（这个日期）；
}
}

在ngOnInit方法中，title和date有一个值，但计数器输入未定义，我不明白为什么要这样做：

@Input() set(counter: Counter) {

if(!counter) {
return;
}

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

}

TS:

模板：

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

试着这样做：

@Input() set(counter: Counter) {

if(!counter) {
return;
}

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

}

TS:

模板：

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

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

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

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

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

问题是，在角度挂钩（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中使用elvis运算符，例如

如果计数器在某个点未定义，则某些东西会压碎你的应用程序

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

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