Angular - Ng-Bootstrap 模态编辑未加载任何数据

Question

在 Angular-12 中，我正在实现 ng-bootsrap 模态。

我有这个代码：

界面：

export interface ICompany {
  id: number;
  name: string;
  website: string;
}

公司服务

public getCompanyById(id: any): Observable<any> {
  return this.http.get(this.api.baseURL + 'company/companies/fetchbyid/' + id, this.httpOptions);
}

组件：

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/services/auth.service';
import { CompanyService } from 'src/app/features/company/services/company.service';
import { ICompany } from 'src/app/features/company/models/company.model';
import { AbstractControlOptions, FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

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

  public loggedIn!: boolean;
  isLoading = false;
  allList: any;
  editForm!: FormGroup;
  company!: ICompany;
  constructor(
    private router: Router,
    private auth: AuthService,
    private token: TokenService,
    private api : ApiService,
    private companyService: CompanyService,
    private fb: FormBuilder,
  ) { }

  ngOnInit(): void {
    this.isLoading = true;
    this.loadEditForm();

    this.companyService.getMyCompany().subscribe(
      data => {
        this.allList = data.results.company;
        console.log(this.allList);
      }
    );
  }

  loadEditForm(){
    this.editForm = this.fb.group({
      id: [''],
      name: ['', [Validators.required, Validators.maxLength(100)]],
      website: ['', [Validators.pattern(this.myregex), Validators.maxLength(100)]],
    });
  }

  fetchDataToEdit(id: any) {
    this.companyService.getCompanyById(id).subscribe(
      (data) => {
        console.log(data);
        this.editForm.get('id')?.setValue(data.company.id);
        this.editForm.get('name')?.setValue(data.company.name);
        this.editForm.get('website')?.setValue(data.company.website);
      }
    );
  }

HTML：

<table class="table table-bordered">
  <thead>
    <tr>
      <th style="width: 10px">#</th>
      <th>Name</th>
      <th>Website</th>
      <th style="width: 13%"></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngIf="allList != undefined">
      <td>1.</td>
      <td>{{ allList.name }}</td>
      <td>{{ allList.website }}</td>
      <td class="project-actions text-right">
        <a class="btn btn-info btn-sm" (click)="fetchDataToEdit(allList.id)" data-toggle="modal" data-toggle="modal" data-target="#editCompanyModal">
          <i class="fas fa-pencil-alt">
                            </i> Edit
        </a>
      </td>
    </tr>
  </tbody>
</table>


<div class="modal fade" id="editCompanyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{'Edit Country Here'}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <form class="form-horizontal" [formGroup]="editForm" (ngSubmit)="submitEditForm()">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="row">
                <div class="col-lg-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Company Name</label>
                    <input formControlName="name" name="name" required="required" type="text" placeholder="Company Name" class="form-control mb-3" id="input-name" />
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Website</label>
                    <input formControlName="website" name="website" required="required" type="text" placeholder="Company Website" class="form-control mb-3" id="input-name" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{'Close'}}</button>
          <button type="submit" class="btn btn-primary">{{'Save Changes'}}</button>
        </div>
      </form>
    </div>
  </div>
</div>

这是使用 POSTMAN 从端点获取的 JSON 结果 getCompanyById：

{
  "message": "Company Detail.",
  "error": false,
  "code": 200,
  "results": {
    "company": {
        "id": 6,
        "name": "ABC Company",
        "website": "https://mycompany.com",
        "company_logo": null,
        "registration_number": "sdsddssd",
        "date_established": "1970-01-01",
        "address": "sdsdssd",
        "country_id": 1,
        "brief_description": "ddssdsd",
        "created_by": 0,
        "updated_by": 0,
        "created_at": "2021-06-16T21:23:07.000000Z",
        "updated_at": null,
    }
  }
}

我希望当我点击编辑时，它应该将数据加载到表单中，但模式表单上的每个字段都是空白的。

console.log(this.allList);

给予：

{id: 6, name: "ABC Company", website: "https://mycompany.com", company_logo: null, ...}

我该如何解决这个问题？

谢谢

Answer 1

要从company 检索值，您需要使用data.results.company 检索，因为您的 JSON 结果如下：

{
  "message": "Company Detail.",
  "error": false,
  "code": 200,
  "results": {
    "company": {
        "id": 6,
        "name": "ABC Company",
        "website": "https://mycompany.com",
        "company_logo": null,
        "registration_number": "sdsddssd",
        "date_established": "1970-01-01",
        "address": "sdsdssd",
        "country_id": 1,
        "brief_description": "ddssdsd",
        "created_by": 0,
        "updated_by": 0,
        "created_at": "2021-06-16T21:23:07.000000Z",
        "updated_at": null,
    }
  }
}

---

解决方案

公司简介.component.ts

  fetchDataToEdit(id: any) {
    this.companyService.getCompanyById(id).subscribe(
      (data) => {
        console.log(data);

        let company = data.results.company;
        this.editForm.get('id')?.setValue(company.id);
        this.editForm.get('name')?.setValue(company.name);
        this.editForm.get('website')?.setValue(company.website);
      }
    );
  }

Sample solution on StackBlitz