按钮不显示在角4

我创建一个用户配置文件组件，我希望用户能够更新他自己的配置文件。我试图做的是，该按钮应该被禁用，直到用户更改他的个人资料中的某些东西。问题是，即使用户更改他的配置文件，该按钮也不会显示。按钮不显示在角4

感谢您的帮助！

userprofile.component.html

<form (ngSubmit)="onSubmit(userProfileForm)" 
     #userProfileForm="ngForm" 
     fxFlexFill [fxLayout]="'row'" 
     fxLayoutAlign="center start"> 
<div class="col-sm-6"> 
     <div class="card"> 
     <div class="card-header"> 
      <strong>Company</strong> 
      <small>Form</small> 
     </div> 
     <div class="card-block"> 
      <div class="form-group"> 
      <label for="company">{{user.profile.displayName}}</label> 
      <input type="text" id="company" 
        fxFlex="100" 
        required 
        minlength="3" 
        placeholder="Username" 
        [(ngModel)]="user.profile.username" 
        name="username" 
        #username="ngModel"> 
      </div> 
      <div class="form-group"> 
      <label for="vat">VAT</label> 
      <input type="text" id="vat" 
       fxFlex="100" 
       minlength="3" 
       placeholder="Display Name" 
       [(ngModel)]="user.profile.displayName" 
       name="displayName" 
       #displayName="ngModel"> 
      </div> 
      <div class="form-group"> 
      <label for="street">Street</label> 
      <input type="text" id="street" placeholder="Enter street name"> 
      </div> 
      <div class="row"> 
      <div class="form-group col-sm-8"> 
       <label for="city">City</label> 
       <input type="text" id="city" placeholder="Enter your city"> 
      </div> 
      <div class="form-group col-sm-4"> 
       <label for="postal-code">Postal Code</label> 
       <input type="text" id="postal-code" placeholder="Postal Code"> 
      </div> 
      </div><!--/.row--> 
      <div class="form-group"> 
      <label for="country">Country</label> 
      <input type="text" id="country" placeholder="Country name"> 
      </div> 
      <button type="submit" 
       [disabled]="!userProfileForm.form.valid || !profileIsChanged()"> 
     </button> 
     </div> 
     </div>

userprofile.component.ts

import {Component, OnInit, ViewChild, OnDestroy} from '@angular/core'; 
import {UserService} from "../pages/users/user.service"; 
import {User} from "../pages/users/user"; 
import {Profile} from "../pages/users/profile"; 
import {AuthService} from "../pages/login/auth.service"; 
import {MdSnackBar} from "@angular/material"; 
import {Observable, Subscription} from "rxjs"; 

@Component({ 
    selector: 'app-userprofile', 
    templateUrl: './userprofile.component.html', 
    styleUrls: ['./userprofile.component.scss'] 
}) 
export class UserprofileComponent implements OnInit, OnDestroy { 

    initialProfile: Profile; 
    user: User; 

    error: string; 
    private sub: any; 

    constructor(private userService: UserService, 
    private auth: AuthService, 
    public updateValidationBar: MdSnackBar) { } 

    ngOnInit() { 
    let sub = this.auth.currentUser().subscribe(user => { 
     this.user = user; 
     this.cloneInitial(this.user.profile); 
    }); 
    this.user = new User(); 
    this.user.profile = new Profile(); 
    this.cloneInitial(this.user.profile); 
    } 



    cloneInitial(profile : Profile){ 
    this.initialProfile = Object.assign(new Profile(), profile); 
    } 

    onSubmit(userProfileForm){ 
    if(userProfileForm.form.valid){ 
     let sub = this.userService.updateUserProfile(this.user) 
     .subscribe(user => { 
      this.updateValidationBar.open("Your profile is update", "Ok", { 
      duration: 3000 
      }); 
      this.cloneInitial(user.profile); 
     }, 
     err => { 
      this.error = err.message; 
     }, 
     () => { 
     ; 
     }); 
    } 
    } 

    ngOnDestroy() { 
    this.sub.unsubscribe(); 
    } 


    profileIsChanged(){ 
    return this.user.profile.displayName !== this.initialProfile.displayName 
     || this.user.profile.username !== this.initialProfile.username 
     || this.user.profile.email !== this.initialProfile.email; 
    } 
}

编辑！我是个白痴。我没有把任何内容放在按钮中！谢谢你帮助我！

来源

2017-04-13 Claudio Ramírez Guichard

你有没有把任何文本内容放在按钮中？ –

好一个:) - 也许有一个CSS内容属性 – andreim

@peeskillet我是一个白痴。这是工作，但没有显示，因为该按钮没有出现，因为它没有内容，它与背景混合。谢谢！ –