主页 / 问题 / 600329
Accepted
Baga
Asked:2020-12-06 23:46:22 +0000 UTC2020-12-06 23:46:22 +0000 UTC

在 Angular 2 组件之间传递对象

  • 772

有一个组件。

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {HomeModel} from '../home/home.model';

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

  public article: {};

  constructor(private activatedRoute: ActivatedRoute,
              private homeModel: HomeModel) {}

  ngOnInit() {
    this.activatedRoute.params.subscribe((params) => {
      this.getArticle(params['id']); // из урла парсится айдишка
    });
  };

  getArticle(id) {
    this.homeModel.getArticles().then((articles) => {
      this.article = articles.filter((article) => {
        return article.id == id; // тут из сервиса вытаскивается нужный объект по айдишке и записывается в this.article
      })[0]; // сначала я думал что ошибку тут, т.к. возвращается массив, он добавив [0] ситуация не изменилась. В консоли - объект есть, в шаблоне - `undefined`
      console.log(this.article); // в консоль отлично выводится нужный объект.
    })
  }
}

然后在模板中：

<h2>Article will be here...</h2>
<h6>{{article.title }}</h6>

我们得到一个错误。的任何财产undefined。我已经阅读了几次文档，并探索了其他资源。

typescript

2 个回答

  1. Best Answer

    错误的问题是数据是异步接收的，由于article组件中没有初始化这个字段，所以一切都落在了试图访问title未定义字段上。

    以免出错。初始化这个字段就足够了，例如在构造函数中：

    constructor(private activatedRoute: ActivatedRoute,
            private homeModel: HomeModel) {
    this.article = {};
}

    在这种情况下，使用ngIf添加检查是可选的。

    备选方案：使用所谓的Elvis 运算符

    <h6>{{article?.title }}</h6>
    • 3

  2. 事实证明，如果您添加一个条件*ngIf，特别是在我的示例*ngIf="article"中，那么一切都会正常。在示例中，当然有此检查，但在我看来，它没有被强制使用。也许有人会帮忙。

    • 1

相关问题