如何在解析组件中的promise后使Angular 2呈现HTML模板？

对于我的应用程序,ItemDetailComponent将显示项目的信息.我有一个使用promise检索所有项目的服务.我使用ActivatedRoute从url路径检索项ID,然后运行服务,获取所有项,然后找到具有上面检索到的ID的项,并将其分配给selectedItem变量.

这是item-detail.component.ts：

export class ItemDetailComponent implements OnInit {
  private title = 'Item Details'
  private selectedItem: object

  constructor(
    private route: ActivatedRoute,private itemService: ItemService
  ) {}

  ngOnInit() {
    const selectedItemId = this.route.snapshot.params.itemId

    return this.itemService.getAllItems()
      .then((items) => {
        return _.find(items,item => item.itemId === selectedItemId)
      })
      .then((selectedItem) => {
        this.selectedItem = selectedItem
        console.log('Inside promise',this.selectedItem)
      })
    console.log('Outside promise',this.selectedItem)
  }
}

这里是item-detail.component.html模板,所以我可以显示我的项目,只是一个例子：

<div>
  <h1>{{title}}</h1>

  <div *ngIf="selectedItem">
  <div><label>Item ID: </label>{{selectedItem.itemId}}</div>
  </div>
</div>

不幸的是,应用程序只返回标题.然后我添加了两个console.log()命令,发现在promise完成之前呈现了promise和html模板之外的那个,并且当时没有selectedItem可用.我怎么能强制应用程序只有在解析了promise后才能执行它们才能让selectedItem就位？

编辑：我在html模板中添加了一个新行来进一步检查：

<div>
  <h1>{{title}}</h1>
  <div><label>Item ID 1: </label>{{selectedItem.itemId}}</div>
  <div *ngIf="selectedItem">
  <div><label>Item ID 2: </label>{{selectedItem.itemId}}</div>
  </div>
</div>

该应用程序显示“项目ID 1：”标签,但没有实际ID.控制台向我显示一条错误,指出“无法读取未定义的属性’itemId’,再次确认整个模板在promise解决之前呈现,并且在加载数据后不会重新呈现.太奇怪了.

解决方法

您可以为获取所需数据的路径创建解析器.

https://angular.io/api/router/Resolve

https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html