我正在尝试通过使用双重ngIf指令为我的项目创建用户配置文件

问题描述 投票:1回答:2

我正在通过使用两个ngif语句来设置更新/编辑用户配置文件,但是由于Angular无法读取属性,因此似乎出现了错误。

我尝试为* ng删除单个属性,但是仍然无法正常工作。

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));
  }
}

单击按钮,并且仅在存在用户数据时],编辑配置文件=查看模式,查看配置文件=完成。

我正在通过使用两个ngif语句来设置更新/编辑用户配置文件,但是由于Angular无法读取属性,因此似乎出现了错误。我尝试为* ngIf ...

angular angularfire angular8 angular-ng-if
2个回答
0
投票

通过(单击)事件尝试调用函数而不是逻辑。


0
投票

这是我在评论中提到的身份验证部分。

© www.soinside.com 2019 - 2024. All rights reserved.