Angular 为什么可观察项目值为'；t正在html模板中显示

我用Angular4创建了一个简单的列表细节示例。在详细信息页面中，我无法显示具有可观察类型类的项目详细信息。在代码块下面复制

@Component({
  selector: 'app-user-detail',
  template: `
  <h2>User Details</h2>
  <div *ngIf="user$ | async as user; else elseBlock">
      <h3>{{user$.name.first }}</h3>
      <p>
      <button (click)="goBack()">Back</button>
      </p>
  </div>
  <ng-template #elseBlock>Undefined data</ng-template>
  `,
  styleUrls: [ './user-detail.component.css' ]
})
export class UserDetailComponent implements OnInit {
  user$: Observable<User>;

  constructor(
    private userService: UserService,
    private route: ActivatedRoute,
    private location: Location
  ) {}

  ngOnInit(): void {
     this.user$ = this.route.paramMap
      .switchMap((params: ParamMap) => this.userService.getUser(params.get('email')));
     // .subscribe(function(x) { console.log(x); });

  }

  goBack(): void {
    this.location.back();
  }
}

---

但我无法在html模板上显示用户数据

这是因为在

h3

中，您引用了

user$

属性，这是一个可观察的属性

您需要使用局部变量，

user

，而不是：

<div *ngIf="user$ | async as user; else elseBlock">
    <h3>{{ user.name.first }}</h3> <!-- use user here, not user$ -->
    <p>
    <button (click)="goBack()">Back</button>
    </p>
</div>

{{user.name.first}

返回

不在html模板上显示数据的原因与我的服务调用功能有关。this.userService.getUser（params.get（'email'））。params.get（'email'）返回带有“：”字符串的电子邮件，因此服务无法查询预期数据。刚刚用空字符串替换了“：”

我只是在Angular.io中跟踪了示例。在该样本中，它引用了一个可观察的属性，并运行。-hero-detail.component.ts此类型密码几乎相同。我认为在

h3

中使用

user$

是一个明显的错误。也许不是唯一的一个，但除非这个错误得到解决，否则它肯定不会起作用。

<div *ngIf="user$ | async as user; else elseBlock">
    <h3>{{ user.name.first }}</h3> <!-- use user here, not user$ -->
    <p>
    <button (click)="goBack()">Back</button>
    </p>
</div>