将对象推入对象数组，然后对象的每个属性都未定义 - Typescript答案

【问题标题】：Push an object into an object array then every property of object become undefined - Typescript将对象推入对象数组，然后对象的每个属性都未定义 - Typescript
【发布时间】：2017-12-25 13:01:24
【问题描述】：

我尝试将一个对象推入一个对象数组，如下所示（我想通过这种方式使用 Angular4 更新 UI）：

在 CampgroundService.ts

export class CampgroundDetail {
    campground: Campground;
    comments: Comment[];
}

在 CampgroundDetailComponent.ts

@Component({
    selector: 'campDetail',
    templateUrl: './app/components/campgrounds/campground.detail.component.html',
    styleUrls: ['./app/components/campgrounds/campgrounds.component.css']
})

export class CampgroundDetailComponent {
    campDetail: CampgroundDetail = new CampgroundDetail();

    updateUI(comment: Comment) {
        console.log(comment);

        this.campDetail.comments.push(
        {
            id: comment.id,
            text: comment.text,
            campground_id: comment.campground_id,
            username: comment.username,
            user_id: comment.user_id
        });

        console.log(this.campDetail.comments);
    }
}

在 campground.detail.component.html

<app-comment *ngIf="userdata" [comment]="selectedComment" (insertedComment)="updateUI($event)"></app-comment>

在CommentFormComponent.ts

@Component({
    selector: 'app-comment',
    templateUrl: './app/components/campgrounds/comment.form.component.html',
    styleUrls: ['./app/components/campgrounds/campgrounds.component.css']
})

export class CommentFormComponent {
    @Output() insertedComment = new EventEmitter<Comment>();

    doSubmit() {
        this.comment.user_id = this.userdata.id;
        this.comment.username = this.userdata.username;
        this.comment.campground_id = this.campground_id;

        this.campgroundService.createComment(this.comment)
            .then(data => {
                this.campgroundService.getComment(data.comment_id)
                    .then(comment => this.insertedComment.emit(comment));
            }).catch(error => {
            if (error.status === 403) {
                this.userService.flush();
                this.router.navigate(['/login']);
            }
        });
    }
}

根据第一个控制台日志，comment 对象不为空。

然而，在推入数组后，对象的每个属性都变成了undefined。

我尝试尽可能多地在 google 上搜索，但仍然找不到任何解决方案。我错过了什么？如果有人能给我任何建议，我将不胜感激。

【问题讨论】：

如何将comment 对象传递给updateUI？ comment 可能只是一个空对象，没有您正在使用的任何属性。
您好，评论对象不为空（我更新了截图）。
你如何将它传递给updateUI？也发一下。它是否涉及任何异步？
是的，我猜它涉及异步。在CommentFormComponent.ts 中，我得到comment 对象作为CampgroundDetailComponent.ts 的@Output 对象。你认为这是一个问题吗？谢谢。
在执行updateUI 时，您的评论对象可能尚未填充。通过JSON.stringifying 您的对象来验证这一点，然后再登录以记录其当前状态：console.log(JSON.stringify(comment))

标签： arrays object typescript undefined push

【解决方案1】：

我终于找到了解决办法。我修改了 CampgroundService.ts

export class CampgroundDetail {
    campground: Campground;
    comments: any[];
}

并修改了CampgroundDetailComponent.ts

@Component({
    selector: 'campDetail',
    templateUrl: './app/components/campgrounds/campground.detail.component.html',
    styleUrls: ['./app/components/campgrounds/campgrounds.component.css']
})

export class CampgroundDetailComponent {
    campDetail: CampgroundDetail = new CampgroundDetail();

    updateUI(comment: Comment) {
        let tempComment = comment['comment'];
        this.campDetail.comments.push(tempComment);
    }
}

现在可以了。

【讨论】：