Question

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

Hosting environment: Production
Now listening on: http://localhost:5000
Application started. Press Ctrl+C to shut down.

当我使用以下代码块检查用户$对象时，我可以在控制台日志中看到它成功检索用户数据。

@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模板上显示用户数据。

Answer 1

这是因为，在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>

Answer 2

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

为什么可观察项目值不会在html模板中显示

2 个答案: