Как привязать данные к управляемой шаблоном форме из списка / таблицы с помощью Angular 7?

Question

Вот мой код для обновления данных.

table.Component.html

 <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef> Actions </th>
        <td mat-cell *matCellDef="let data">
          <button mat-raised-button color="primary" [matMenuTriggerFor]="menu">
            Action
          </button>
          <mat-menu #menu="matMenu">
            <a class="mat-menu-item" type="button" (click)="showForEdit(data)">Edit</a>
            <a class="mat-menu-item" type="button" href="#">Details</a>
            <a class="mat-menu-item" type="button" href="#">Delete</a>
          </mat-menu>
        </td>
</ng-container>

table.component.TS

 showForEdit(obj: any) {
    debugger;
    this.roleService.GetRoleById(obj.id)
      .subscribe(
        response => {
          this.objRoleModel = response;
          this.router.navigateByUrl("/roles/Create");
          console.log(response);

        },
        error => {
          console.log(' err ' + error);
        }
      );
  }

Мое требование заключается в том, что я хочу получить данные из таблицы в форме создания для обновления.короче говоря, когда я нажимаю кнопку редактирования, я хочу видеть данные, заполненные в форме создания.Данные будут создаваться и обновляться с использованием той же формы.

Вот мой код для создания и обновления.

form.component.html

      <form #Roleadd='ngForm' class="example-form" (ngSubmit)="CreateRole(Roleadd)">
        <h4>Role Name</h4>
        <mat-form-field class="example-full-width" appearance="outline">
          <input matInput placeholder="Enter Role" name="roleName" roleName required [(ngModel)]="objRoleModel.RoleName"
            #roleName="ngModel">
        </mat-form-field>
        <section class="section">
          <mat-checkbox name="isActive" [(ngModel)]="objRoleModel.IsActive" #isActive ="ngModel">Is Active</mat-checkbox>
        </section>
        <mat-card-actions>

            <button mat-flat-button type="submit" color="primary">Create New</button>
            <button mat-flat-button type="button" color="primary" (click)="backtolist()">Back to List</button>

        </mat-card-actions>
      </form>

form.component.ts

  CreateRole(regForm: NgForm) {

    if (regForm.value.Id == null) {

      this.objRoleModel.RoleName = regForm.value.roleName;
      this.objRoleModel.IsActive = regForm.value.isActive;

      this.roleService.CreateRole(this.objRoleModel).subscribe(res => {
        console.log(this.objRoleModel);
        alert("Role Added Successfully !!");
      })
    }
    else {

      this.roleService.updateRole(this.objRoleModel).subscribe(res => {
        alert("Role Updated Successfully !!");
      });
    }

  }

Вот мой класс обслуживания

Service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { RoleModel } from "../models/role.model";

@Injectable({
  providedIn: 'root'
})
export class RoleService {

  objRoleModel: RoleModel;


  constructor(private http: HttpClient) {

    this.objRoleModel = new RoleModel();
  }




  GetRoleById(Id): Observable<any> {
    debugger;
    return this.http.get("https://localhost:44336/api/Roles/" + Id)
      .pipe(
        map((response: Response) => {
          return response;
        }),
        catchError((error: Response) => {
          return throwError(console.log(error));
        })
      );
  }

  CreateRole(objRoleModel: RoleModel) {
    debugger;
    const headers = new HttpHeaders().set('content-type', 'application/json');
    var body = {
      Id: objRoleModel.Id,
      RoleName: objRoleModel.RoleName,
      IsActive: objRoleModel.IsActive
    }
    return this.http.post<RoleModel>("https://localhost:44336/api/Roles", body, { headers });

  }

  updateRole(objRoleModel: RoleModel) {
    debugger;
    const params = new HttpParams().set("Id", objRoleModel.Id.toString());
    const headers = new HttpHeaders().set('content-type', 'application/json');
    var body = {
      Id: objRoleModel.Id,
      RoleName: objRoleModel.RoleName,
      IsActive: objRoleModel.IsActive
    }
    return this.http.put<RoleModel>("https://localhost:44336/api/Roles?" + objRoleModel.Id, body, { headers, params })
  }
}

Answer 1

Вы можете использовать сервис для обмена данными между вашими компонентами.Здесь я поделился с вами службой, которая используется для установки значений и получения значений в объекте Singleton.Добавьте эту услугу в провайдера вашего модуля и объявите ее в table.component.ts и form.component.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

/**
 * A singleton service to store data throughout the application lifecycle.
 *
 */
@Injectable()
export class SessionService {

  private sessionLevel: any = {};  

  setSessionVar(key: string, value: any): void {
    this.sessionLevel[key] = value;
  }

  getSessionVar(key: string): any {
    return this.sessionLevel[key];
  }
};

в вашем table.component.ts, при нажатии кнопки редактирования вы должны установить значение

 showForEdit(obj: any) {
    this.roleService.GetRoleById(obj.id)
      .subscribe(
        response => {
          this.objRoleModel = response;
          this.sessionService.setSessionVar('SELECTED_ITEM',response);
          this.router.navigateByUrl("/roles/Create");
          console.log(response);

        },
        error => {
          console.log(' err ' + error);
        }
      );
  }

В вашем form.component.ts , на ngOnInit вы должны получить значение

public objRoleModel: any = {};
ngOnInit() {
   if(this.sessionService.getSessionVar('SELECTED_ITEM')) {
     const data = this.sessionService.getSessionVar('SELECTED_ITEM');
     this.objRoleModel.RoleName = data.roleName;
     this.objRoleModel.IsActive = data.isActive;
   }
 }