如果我单击“编辑”按钮，则社交媒体和办公室联系人字段应该可以动态编辑。
这是组件文件，如果我单击“编辑”按钮，社交媒体和 办公室联系人字段应可动态编辑。
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { AdvisorBrandingService } from '../core/services/webServiceConsumers/advisor-branding.service';
import { AdvisorBrand } from '@model/advisorBrand.model';
import { DomSanitizer } from '@angular/platform-browser';
import { AdvisorContacts } from '@model/advisorContact.model';
import { MyProfileService } from '../core/services/webServiceConsumers/my-profile.service';
@Component({
selector: 'app-my-profile',
templateUrl: './my-profile.component.html',
styleUrls: ['./my-profile.component.scss']
})
export class MyProfileComponent implements OnInit, OnDestroy {
myProfileSubscriber: Subscription;
contactSubscriber: Subscription;
myprofile: AdvisorBrand;
contacts: AdvisorContacts;
imagePath: any;
headers: Object
constructor(private advisorbranding: AdvisorBrandingService, private _sanitizer: DomSanitizer) { }
ngOnInit() {
this.contactHeaders()
this.myProfileSubscriber = this.advisorbranding.mockAdvisorBranch().subscribe(
data => {
this.myprofile = data;
console.log(this.myprofile);
this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64 + this.myprofile.Photo');
})
this.contactSubscriber = this.advisorbranding.mockContacts().subscribe(data => {
this.contacts = data;
// console.log(this.contacts);
})
this.advisorbranding.getAdvisorBrand();
}
contactHeaders() {
this.headers = [{
name: 'First Name',
},
{
name: 'Last Name',
},
{
name: 'User Name',
},
{
name: 'RepID',
},
{
name: 'Phone #',
},
{
name: 'Email Id',
},
{
name: 'Action',
}]
}
ngOnDestroy() {
this.myProfileSubscriber.unsubscribe();
this.contactSubscriber.unsubscribe();
}
}
This is the HTML file, If i click on edit button, social media and
office contacts fields should be editable dynamically.<div class="Card-Body">
<div class="d-flex justify-content-between mt-3">
<div>
<div class="profile">
<b>My Profile</b>
</div>
<p class="profile-text">My Profile This is a sample text. You can customize your profile information or
office contact details. Your contact information and profile picture will be visible to all clients
when they login to Account View.</p>
</div>
<div>
<button id="editBtn" type="button" data-dismiss="modal" (click)="isValid=!isValid" class="btn modal-btn btn-default"
[hidden]="isValid">Edit</button>
<button id="submitBtn" [disabled]="!isValid" type="button" data-dismiss="modal" class="btn modal-btn btn-default"
[hidden]="!isValid">Submit</button>
<button id="Cancel" type="button" (click)="isValid=!isValid" data-dismiss="modal" class="btn modal-btn btn-default"
[hidden]="!isValid">Cancel</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="profile-summary">
<b>Profile summary</b>
</div>
<div class="d-flex align-items-start summary" style="margin-bottom: 10px;">
<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);"
class="mr-3 d-none d-sm-block" alt="...">
<div>
<div class="summary-details">This is a sample text. You can upload your profile picture here. This
will be visible to all clients in your contact information. You can change it again if you
want.
</div>
</div>
</div>
<div class="profile-information">
<b>Profile Information</b>
</div>
<div class="row">
<div class="col-sm">
<div class="name-heading">
First Name
</div>
<span class="name">
<b>Samuel</b>
</span>
</div>
<div class="col-sm">
<div class="name-heading">
Last Name
</div>
<span class="name">
<b>Jacob</b>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="office-address-heading">
<b>Office Address</b>
</div>
<div class="d-flex align-items-center">
<i class="fa fa-map-marker fa-2x mr-2" aria-hidden="true"></i>
<address class="mb-0">
2031 Tennessee Ave
United States of America
</address>
</div>
</div>
<div class="col-sm">
<div class="office-address-heading">
<b>Communication Details</b>
</div>
<div class="d-flex align-items-center office-address-details">
<i class="fa fa-phone fa-2x mr-2" aria-hidden="true"></i>
<div><a href="tel:1-562-867-5309">+1 (407) 882-2342</a></div>
<span class="d-flex align-items-center mail office-address-details">
<i class="fa fa-envelope fa-2x mr-2" aria-hidden="true"></i>
<div>
<a href="mailto:rafael.cepeda@lpl.com">rafael.cepeda@lpl.com</a>
</div>
</span>
</div>
</div>
</div>
<div class="social-media">
<b>Social Media</b>
</div>
<div class="row">
<div class="col-sm">
<div class="social-headings">
Facebook
</div>
<span class="social-name">
<i class="fa fa-facebook-square mr-2" aria-hidden="true"></i>
<b><a href="">{{ myprofile?.FacebookUserName }} </a></b>
</span>
</div>
<div class="col-sm">
<div class="social-headings">
LinkedIn
</div>
<span class="social-name">
<i class="fa fa-linkedin-square mr-2" aria-hidden="true"></i>
<b><a href="">{{ myprofile?.LinkedInUserName }}</a></b>
</span>
</div>
<div class="col-sm">
<div class="social-headings">
Twitter
</div>
<span class="social-name">
<i class="fa fa-twitter-square mr-2" aria-hidden="true"></i>
<b><a href="">{{ myprofile?.TwitterUserName }}</a></b>
</span>
</div>
</div>
<div class="d-flex justify-content-between mb-2">
<div class="office-contacts">
<b>Office Contacts</b>
</div>
<button type="button" class="btn btn-outline-primary">Add</button>
</div>
<app-table [tableHeader]="headers" [tableContent]="contacts"></app-table>
</div>