Angular 插值在角度上不起作用

我有一个角度项目，我正在工作，由于某种原因，插值不工作在一个特定的组成部分。我尝试将此组件与项目中的其他组件进行比较，但它们是相同的。然而，它不起作用。我已经复制了下面的component.ts和component.html文件。我做错了什么

members.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { moveIn, fallIn, moveInLeft } from '../router.animations';

@Component({
  selector: 'app-members',
  templateUrl: './members.component.html',
  styleUrls: ['./members.component.css'],
  animations: [moveIn(), fallIn(), moveInLeft()],
  host: {'[@moveIn]': ''}
})
export class MembersComponent implements OnInit {

  name: any;
  state = '';
  test = 'test2';

  constructor(public af: AngularFireAuth, private router: Router) {

    this.af.authState.subscribe(auth => {
      if (auth) {
        this.name = af.auth.currentUser;
        console.log('Display Name: ' + this.name.displayName);
      }
    });

  }

  logout() {
     this.af.auth.signOut();
     console.log('logged out');
     this.router.navigateByUrl('/login');
  }

  ngOnInit() {
  }

}

members.component.html

<div class="form-container" id="toolbar">
  <header [@fallIn]="state">
    <button (click)="logout()" class="basic-btn">Logout</button>
  </header>
  <div id="page" [@moveInLeft]="state">
    <h2>Hey {{ this.name.displayname }}!</h2>

    <p>This is a test {{ test }}</p>

    <img src="/src/assets/images/filler.png" />
  </div>

</div>

注销
嘿{{this.name.displayname}}！
这是一个测试{{test}

我真的不认为这是获取当前登录用户详细信息的方式。这些详细信息出现在

authState

中，这是一个承诺，而不是一个可观察的信息。我想知道您如何能够在控制台中查看用户详细信息

另外，您正在插值语法中使用

{{this.name.displayname}}

。您应该使用

{{name.displayName}

。名称最初将是未定义的

。然后，一旦承诺值被解析，它将被填充。但在此之前，模板将开始渲染。为了避免控制台上出现任何错误，还可以在包装分区上放置一个

*ngIf=“name”

。或者更好，使用

async

管道来打开

authState

在

ngOnInit

中执行此操作，而不是在

构造函数中执行此操作

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { moveIn, fallIn, moveInLeft } from '../router.animations';

@Component({
  selector: 'app-members',
  templateUrl: './members.component.html',
  styleUrls: ['./members.component.css'],
  animations: [moveIn(), fallIn(), moveInLeft()],
  host: {
    '[@moveIn]': ''
  }
})
export class MembersComponent implements OnInit {

  user;
  state = '';
  test = 'test2';

  constructor(public af: AngularFireAuth, private router: Router) { }

  logout() {
    this.af.auth.signOut();
    console.log('logged out');
    this.router.navigateByUrl('/login');
  }

  ngOnInit() {
    this.user = this.af.authState;
  }

}

模板使用中

<div 
  class="form-container" 
  id="toolbar" 
  *ngIf="user | async as currentUser">
  <header [@fallIn]="state">
    <button (click)="logout()" class="basic-btn">Logout</button>
  </header>
  <div id="page" [@moveInLeft]="state">
    <h2>Hey {{ currentUser.displayName }}!</h2>
    <p>This is a test {{ test }}</p>
    <img src="/src/assets/images/filler.png" />
  </div>
</div>


注销
嘿{{currentUser.displayName}}！
这是一个测试{{test}


如果没有
这个
我真的不认为这就是你获取当前登录用户详细信息的方式。这些详细信息出现在
authState
中，这是一个承诺，而不是一个可观察的信息。我想知道您如何能够在控制台中查看用户详细信息

另外，您正在插值语法中使用
{{this.name.displayname}}
。您应该使用
{{name.displayName}
。名称最初将是未定义的
。然后，一旦承诺值被解析，它将被填充。但在此之前，模板将开始渲染。为了避免控制台上出现任何错误，还可以在包装分区上放置一个
*ngIf=“name”
。或者更好，使用
async
管道来打开
authState

在
ngOnInit
中执行此操作，而不是在
构造函数中执行此操作

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { moveIn, fallIn, moveInLeft } from '../router.animations';

@Component({
  selector: 'app-members',
  templateUrl: './members.component.html',
  styleUrls: ['./members.component.css'],
  animations: [moveIn(), fallIn(), moveInLeft()],
  host: {
    '[@moveIn]': ''
  }
})
export class MembersComponent implements OnInit {

  user;
  state = '';
  test = 'test2';

  constructor(public af: AngularFireAuth, private router: Router) { }

  logout() {
    this.af.auth.signOut();
    console.log('logged out');
    this.router.navigateByUrl('/login');
  }

  ngOnInit() {
    this.user = this.af.authState;
  }

}

模板使用中

<div 
  class="form-container" 
  id="toolbar" 
  *ngIf="user | async as currentUser">
  <header [@fallIn]="state">
    <button (click)="logout()" class="basic-btn">Logout</button>
  </header>
  <div id="page" [@moveInLeft]="state">
    <h2>Hey {{ currentUser.displayName }}!</h2>
    <p>This is a test {{ test }}</p>
    <img src="/src/assets/images/filler.png" />
  </div>
</div>


注销
嘿{{currentUser.displayName}}！
这是一个测试{{test}


如果没有
此
我认为您正在进行异步调用，因此模板无法检索该值，因为http请求未完成

将
div
包装在
*ngIf
语句中，并在模板中引用变量，而不使用
此语句。
：

<div class="form-container" id="toolbar" *ngIf="name">
  <header [@fallIn]="state">
    <button (click)="logout()" class="basic-btn">Logout</button>
  </header>
  <div id="page" [@moveInLeft]="state">
    <h2>Hey {{ name.displayname }}!</h2>

    <p>This is a test {{ test }}</p>

    <img src="/src/assets/images/filler.png" />
  </div>

</div>


注销
嘿{{name.displayname}}！
这是一个测试{{test}

我认为您正在进行异步调用，因此模板无法检索该值，因为http请求未完成

将
div
包装在
*ngIf
语句中，并在模板中引用变量，而不使用
此语句。
：

<div class="form-container" id="toolbar" *ngIf="name">
  <header [@fallIn]="state">
    <button (click)="logout()" class="basic-btn">Logout</button>
  </header>
  <div id="page" [@moveInLeft]="state">
    <h2>Hey {{ name.displayname }}!</h2>

    <p>This is a test {{ test }}</p>

    <img src="/src/assets/images/filler.png" />
  </div>

</div>


注销
嘿{{name.displayname}}！
这是一个测试{{test}

我在h2元素上有相同的问题，刚刚在h2上包装了*ngIf，它工作了
我在h2元素上有相同的问题，刚刚在h2上包装了*ngIf，它工作了
你有什么错误吗？这是什么
console.log（'displayName:'+this.Name.displayName）打印到控制台？它正在正确打印显示名称。是否有任何错误？这是什么
console.log（'displayName:'+this.Name.displayName）打印到控制台？它正在正确打印显示名称。我仍然有相同的问题。显示名称会打印到控制台，但模板项不会被替换。实际上，我在Angular 6上遇到了相同的问题。我将div包装在*ngIf中，与您一样，我在控制台上看到了该值，但它不会在页面上呈现。我猜我们以同样的方式破坏了模板。我仍然有同样的问题。显示名称会打印到控制台，但模板项不会被替换。实际上，我在Angular 6上遇到了相同的问题。我将div包装在*ngIf中，与您一样，我在控制台上看到了该值，但它不会在页面上呈现。我猜我们以同样的方式破坏了模板。我仍然有同样的问题。显示名称会打印到控制台，但模板项不会被替换。这种情况下还有一个问题：
displayName
应该使用，而不是
displayName
这是否解决了您的问题？否。displayName和test都不显示。displayName被正确打印到控制台，但它没有出现在网页上。我仍然有相同的问题。显示名称会打印到控制台，但模板项不会被替换。这种情况下还有一个问题：
displayName
应该使用，而不是
displayName
这是否解决了您的问题？否。displayName和test都不显示。displayName会正确打印到控制台，但不会显示在网页上。