Angular 5将对象传递给组件

时间:2018-05-25 11:30:32

标签: javascript typescript angular5

所以我创建了以下类:

export class PresentObject {
    public type: string;
    public resourceUrl: string;
    public text: string;

}

以下组件:

import {Component, Input, OnInit} from '@angular/core';
import {PresentObject} from '../classes/present-object';

@Component({
    selector: 'app-video',
    templateUrl: './video.component.html',
    styleUrls: ['./video.component.css']
})
export class VideoComponent implements OnInit {

    @Input()
    view: PresentObject;

    constructor() {
    }

    ngOnInit() {
        console.log(this.view.text);
    }

}

现在我尝试通过HTML插入:

  <section *ngFor="let view of views; let last = last" [ngSwitch]="view.type">
    <app-video *ngSwitchCase="'video'" view="{{view}}"></app-video>
  <span *ngIf="last">{{repeatComplete()}}</span>
</section>

调试结束后,我可以看到console.log(this.view)我是否获得了"[object Object]"

谁能告诉我我做错了什么?

1 个答案:

答案 0 :(得分:1)

 <section *ngFor="let view of views; let last = last" [ngSwitch]="view.type">
    <app-video *ngSwitchCase="'video'" view="view"></app-video>
  <span *ngIf="last" (click)="repeatComplete()">LAST</span>
</section>