Question

TypeError：无法读取null

的属性'outlet'

我正在使用参数化路由来传递每个项目的ID。这条路线运转良好。

<table class="table">
<thead>
  <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Status</th>
  </tr>
</thead>
<tbody id='myRecords'>
  <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>
      <div class="dropdown">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Active
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Active</a>
          <a class="dropdown-item" href="#">Inactive</a>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>
      <div class="dropdown">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Active
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Active</a>
          <a class="dropdown-item" href="#">Inactive</a>
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>
      <div class="dropdown">
        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Active
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Active</a>
          <a class="dropdown-item" href="#">Inactive</a>
        </div>
      </div>
    </td>
  </tr>
</tbody>

因为，在第一次加载页面时，id为空，因为数据不是从服务器获取的。我得到null { path: 'item/:id', component: SingleItemComponent } <a class="mdl-button mdl-js-button mdl-button--icon" [routerLink]="['/item', _genericViewModel.data?.question.questionId]">的原因是因为异步调用。当它从服务器获取数据时，每件事情都很完美。

如何检查组件初始加载的空状态。

以下是来自服务器

的获取数据的代码

_genericViewModel.data?.question.questionId]

这是错误屏幕截图

Answer 1

据我所知，你有3种方法可以解决这个问题：

在*ngIf="_genericViewModel.data"标记中使用<a>。
使用async中的routerLink管道，如下所示：

[routerLink]="['/item', _genericViewModel.data?.question.questionId | async]"
使用resolver。在路由到特定URL之前，您可以通过该方法运行数据提取等逻辑。使用官方docs了解详情。

虽然我不确定第二种选择，但请尝试一下，让我知道。

参数化路由中的空值Angular 5

1 个答案: