버튼이 각도 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; 
    } 
}

편집! 나는 바보 야. 나는 단추에 어떤 내용도 넣지 않았다! 도와 주셔서 감사합니다! [disabled]="!userProfileForm.valid || !profileIsChanged()" 에

출처

2017-04-13 Claudio Ramírez Guichard

의도적으로 버튼에 텍스트 콘텐츠를 넣지 않았습니까? –

좋은 하나 :) - 아마도 CSS 콘텐츠 속성이 있습니다 – andreim

@peeskillet Im 바보입니다. 그것은 작동하지만 보이지 않는데 왜냐하면 아무런 내용도 없었고 배경과 블렌딩하기 때문에 버튼이 나타나지 않았기 때문입니다. 감사! –