如果我单击添加按钮，则应添加行并将其保存在Angular 5中

Question

如果我单击添加按钮，应添加行并将其保存在Angular 5中，请在此先感谢我

这是组件文件，如果我单击添加按钮，则应添加行， 应该保存在Angular 5中

@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: AdvisorContact[];
          imagePath: any;
          headers: Object

          constructor(private advisorbranding: AdvisorBrandingService, private profileSvc: MyProfileService, private _sanitizer: DomSanitizer) { }

          ngOnInit() {
            this.contactHeaders()
            this.myProfileSubscriber = this.advisorbranding.getAdvisorBrand().subscribe(
              data => {
                this.myprofile = data;
                console.log(this.myprofile);
                this.imagePath = this._sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64 + this.myprofile.Photo');
              })

            this.contactSubscriber = this.profileSvc.getAdvisorContacts().subscribe(data => {
              this.contacts = data;
            });
          }



          contactHeaders() {
            this.headers = [{
              name: 'First Name',
            },
            {
              name: 'Last Name',
            },
            {
              name: 'User Name',
            },
            {
              name: 'RepID',
            },
            {
              name: 'Phone #',
            },
            {
              name: 'Email Id',
            },
            {
              name: 'Action',
            }]

          }

          isEditItems: boolean;
          ngOnDestroy() {
            this.myProfileSubscriber.unsubscribe();
            this.contactSubscriber.unsubscribe();
          }

          onEditCloseItems() {
            this.isEditItems = !this.isEditItems;
            } 

        }

这是HTML5文件，如果我单击“添加”按钮，应添加行并将其保存在Angular 5中，

<div class="table-responsive">
    <table class="table table-borderless table-hover">
        <thead class="thead-light">
            <tr>
                <th *ngFor="let h of tableHeader">{{ h?.name}}</th>
            </tr>
        </thead>

        <tbody *ngIf="!isEditItems">
            <tr *ngFor="let c of tableContent?.advisorContacts">
                <td *ngIf="c?.FirstName">{{ c?.FirstName }}</td>
                <td *ngIf="c?.LastName">{{ c?.LastName }}</td>
                <td *ngIf="c?.UserName">{{ c?.UserName }}</td>
                <td *ngIf="c?.AssocRepID"> {{ c?.AssocRepID }}</td>
                <td *ngIf="c?.MobileNO"><a href="tel:1-562-867-5309">{{ c?.MobileNO }}</a></td>
                <td *ngIf="c?.Email"><a href="mailto:rafael.cepeda@lpl.com"> {{ c?.Email }} </a></td>
                <td>Delete</td>
            </tr>
        </tbody>

        <tbody *ngIf="isEditItems">
            <tr *ngFor="let c of tableContent?.advisorContacts">
                <td>
                    <div class="input-group">
                        <input class="" type="text" width="10%" name="{{c?.FirstName}}">
                    </div>
                </td>
                <td>
                    <div class="input-group">
                        <input class="" type="text" name="{{c?.LastName}}">
                    </div>
                </td>
                <td>
                    <div class="input-group">
                        <input class="" type="text" name="{{c?.UserName}}">
                    </div>
                </td>
                <td>
                    <div class="input-group">
                        <input class="" type="text" name="{{c?.AssocRepID}}">
                    </div>
                </td>
                <td>
                    <div class="input-group">
                        <input class="" type="text" name="{{c?.MobileNO}}">
                    </div>
                </td>
                <td>
                    <div class="input-group">
                        <input class="" type="text" name="{{c?.Email}}">
                    </div>
                </td>

            </tr>

        </tbody>

    </table>
</div>

<div class="d-flex justify-content-between mb-2">
        <div class="office-contacts">
            <b>Office Contacts</b>
        </div>
        <button id="addBtn" [disabled]="!isEditItems" type="button" (click)="addValue()" data-dismiss="modal" class="btn
            modal-btn btn-default" [hidden]="!isEditItems">Add</button>
    </div>
    <app-table [tableHeader]="headers" [tableContent]="contacts" [isEditItems]="isEditItems"></app-table>

</div>