Я пытаюсь создать профиль пользователя для моего проекта, используя двойные директивы ngIf

Question

Я настраиваю обновление / редактирование профиля пользователя с помощью двух операторов ngif, однако, похоже, что произошла ошибка, так как Angular не может прочитать свойства.

Я попытался удалить одно свойство для * ngIf, но оно все равно не работает.

user-dashboard.component.html

<mat-toolbar color="primary">
  <button mat-icon-button>
    <mat-icon>arrow_back</mat-icon>
  </button>
  <!-- Spread the toolbar item apart.-->
  <span class="spacer"></span>
  <button mat-button (click)="editing=false" *ngIf="editing">Done</button>
  <button mat-button (click)="editing=true" *ngIf="!editing">Edit Profile</button>

</mat-toolbar>

<!-- Only when there a user.-->
<ng-container *ngIf="user">
  <div [hidden]="editing">view mode</div>
  <div [hidden]="!editing">editing mode</div>
</ng-container>

user-dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/storage';

import { AuthService } from '../../core/auth.service';
import { UserService } from '../user.service';
import { User } from '../user.model';


user-dashboard.component.ts
@Component({
  selector: 'app-user-dashboard',
  templateUrl: './user-dashboard.component.html',
  styleUrls: ['./user-dashboard.component.css']
})
export class UserDashboardComponent implements OnInit {
  editing = false;
  user: User;

  constructor(
    private auth: AuthService,
  ) {}

  ngOnInit() {
    this.getUser();
  }

  getUser() {
    return this.auth.user.subscribe(user => (this.user = user));
  }
}

При нажатии на кнопку и ТОЛЬКО КОГДАA USER DATA EXIST , редактирование профиля = режим просмотра, просмотр профиля = готово.

Answer 1

Это часть аутентификации, которую я упомянул в комментариях.

Я бы порекомендовал вам использовать AngularFire2, это потрясающая библиотека для Firebase и Angular. https://github.com/angular/angularfire2

isUserAuth: false;
constructor (private auth: AngularFireAuth) {}

loginUser(email: string, pass: string) {
   this.auth.auth.signInWithEmailAndPassword(email, pass).then(
      data => {
           if (data.user.uid) {
              this.isUserAuth = true;
           }
      }
   );
}

Answer 2

По событию (click) попытайтесь вызвать функции, а не логику.

Temaplate:

<ng-container *ngIf="user">
<button mat-button *ngIf="editing" (click)="onEditing()">Done</button>
<button mat-button *ngIf="!editing" (click)="onEditing()">Edit Profile</button>
</ng-container>

component.ts:

onEditing() {
this.editing = !this.editing
}