javascript - (Angular) 在 Bootstrap Modal 中访问 Typescript 对象

Question

似乎无法让我的模态访问 Controller 中的 javascript 对象，并相应地填充字段。

我所取得的成就:

• 制作了一个显示“人物”对象列表的组件。
• 点击该列表中的一行，就会出现一个模式。

我似乎做不到:

• 根据我点击的“人”填充模式。 (我使用模式作为客户详细信息卡)。

我尝试过的:

• 我尝试在我的 Controller 中创建一个接受“人”的方法该行的对象，并将其分配给我的 Controller 中的变量，但我似乎无法根据此变量更新我的模式。

TL,DR:作为 Angular 的初学者，让引导模式访问位于其 Controller 中的对象的最简单方法是什么？

代码引用:

HTML:

<div>
<!--Grid column-->
<div class="mx-auto my-auto animated fadeIn col-lg-12">

    <!--Card-->
    <div class="card card-cascade">

        <!--Card Header-->
        <div class="view gradient-card-header blue-gradient pt-4 text-center text-white">

            <!--Table-->
            <table class="table table-hover table-respsonsive">

                    <!--Table head-->
                    <thead class="blue-grey lighten-4">
                        <tr>
                            <th>Person ID</th>
                            <th>First Name</th>
                            <th>Middle Name</th>
                            <th>Last Name</th>
                            <th>Date of Birth</th>
                            <th>Gender</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <!--Table head-->

                    <!--Table body-->
                    <tbody>
                        <tr class="pt-auto" *ngFor= "let person of persons">

                            <!--Non-Edit Mode Values-->
                            <td *ngIf="!editingModeCheck(person.Person_Id)" (click)="onOpenProfileModule(person); style.show()">{{person.Person_Id}}</td>
                            <td *ngIf="!editingModeCheck(person.Person_Id)" (click)="onOpenProfileModule(person); style.show()">{{person.First_Name}}</td>
                            <td *ngIf="!editingModeCheck(person.Person_Id)" (click)="onOpenProfileModule(person); style.show()">{{person.Middle_Name}}</td>
                            <td *ngIf="!editingModeCheck(person.Person_Id)" (click)="onOpenProfileModule(person); style.show()">{{person.Last_Name}}</td>
                            <td *ngIf="!editingModeCheck(person.Person_Id)" (click)="onOpenProfileModule(person); style.show()">{{person.Date_Of_Birth | date:'yyyy-MM-dd'}}</td>
                            <td *ngIf="!editingModeCheck(person.Person_Id)" (click)="onOpenProfileModule(person); style.show()">{{person.Gender}}</td>

                            <!--Edit Mode Values-->
                            <td [hidden]="!editingModeCheck(person.Person_Id)">{{person.Person_Id}}</td>
                            <td [hidden]="!editingModeCheck(person.Person_Id)"><input type="text" id="firstNameUpdate" class="form-control" #firstNameUpdate value="{{person.First_Name}}"></td>
                            <td [hidden]="!editingModeCheck(person.Person_Id)"><input type="text" id="middleNameUpdate" class="form-control" #middleNameUpdate value="{{person.Middle_Name}}"></td>
                            <td [hidden]="!editingModeCheck(person.Person_Id)"><input type="text" id="lastNameUpdate" class="form-control" #lastNameUpdate value="{{person.Last_Name}}"></td>
                            <td [hidden]="!editingModeCheck(person.Person_Id)"><input type="date" id="dateOfBirthUpdate" class="form-control" #dateOfBirthUpdate value="{{person.Date_Of_Birth | date:'yyyy-MM-dd'}}"></td>
                            <td [hidden]="!editingModeCheck(person.Person_Id)"><input type="text" id="genderUpdate" class="form-control" #genderUpdate value="{{person.Gender}}"></td>

                            <!--Action Buttons-->
                            <td class="text-center">

                                <!--Open Edit Mode Button-->
                                <a *ngIf="!editingModeCheck(person.Person_Id)" class="green-text px-2" style="font-size: 150%;" data-placement="top" data-toggle="tooltip" title="Edit" (click) = "onEditClicked(person.Person_Id, null, null, null, null, null)">
                                    <i class="fa fa-pencil"></i>
                                </a>

                                <!--Close Edit Mode Button-->
                                <a *ngIf="editingModeCheck(person.Person_Id)" class="green-text px-2" style="font-size: 150%;" data-placement="top" data-toggle="tooltip" title="Save Changes" (click) = "onEditClicked(person.Person_Id, firstNameUpdate.value, middleNameUpdate.value, lastNameUpdate.value, dateOfBirthUpdate.value, genderUpdate.value)">
                                    <i class="fa fa-pencil"></i>
                                </a>

                                <!--Delete Button-->
                                <a class="red-text px-2" style="font-size: 150%;" data-placement="top" data-toggle="tooltip" title="Remove" (click) = "onDeletePerson(person.Person_Id); onGetPersons()">
                                    <i class="fa fa-times"></i>
                                </a>



                            </td>
                        </tr>

                        <!--Add New Client Entry Fields-->
                        <tr class = "pt-auto">
                            <td></td>
                            <td><input type="text" id="firstName" class="form-control" #firstName></td>
                            <td><input type="text" id="middleName" class="form-control" #middleName></td>
                            <td><input type="text" id="lastName" class="form-control" #lastName></td>
                            <td><input type="date" id="dateOfBirth" class="form-control" #dateOfBirth></td>
                            <td><input type="text" id="gender" class="form-control" #gender></td>

                            <td class="text-center">
                                <a class="green-text px-1" style="font-size: 150%;" data-placement="top" data-toggle="tooltip" title="Add"(click) = "onAddPerson(firstName.value, middleName.value, lastName.value, dateOfBirth.value, gender.value)">
                                    <i class="fa fa-plus mt-3"></i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                    <!--Table body End-->
                </table>
                <!--Table End-->
            </div>
            <!--Table Wrapper End-->

        </div>
        <!--/.Card content-->

    </div>
    <!--/.Card-->

</div>
<!--Grid column-->

<!--Add Profile Modal-->
<div mdbModal #style="mdb-modal" class="modal fade" id="centralModalInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-notify modal-info" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <p class="heading lead">{{personWhosContactIsBeingUpdated.First_Name}}</p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="style.hide()">
                    <span aria-hidden="true" class="white-text">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <i class="fa fa-check fa-4x mb-3 animated rotateIn"></i>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat. Esse ratione
                        fuga, enim, ab officiis totam.</p>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <a type="button" class="btn btn-primary waves-light" mdbWavesEffect>Get it now <i class="fa fa-diamond ml-1"></i></a>
                <a type="button" class="btn btn-outline-secondary" data-dismiss="modal" (click)="style.hide()" mdbWavesEffect>No, thanks</a>
            </div>
        </div>
    </div>
</div>

</div>

组件:

import { Component, OnInit } from '@angular/core';
import { PersonsService } from '../services/persons.service';
import { Person } from 'models/person.model';

@Component({
  selector: 'app-persons-directory',
  templateUrl: './persons-directory.component.html',
  styleUrls: ['./persons-directory.component.scss'],
  providers: [PersonsService]
})
export class PersonsDirectoryComponent implements OnInit {

  persons = [];
  isEditModeEnabled: boolean = false;
  idOfItemBeingEdited: number;
  personWhosContactIsBeingUpdated: Person;


  constructor(private personservice: PersonsService) { }

  ngOnInit() {
    this.onGetPersons();
  }

  onGetPersons() {
    this.personservice.getPersons()
    .subscribe(
     (response: any[]) => {this.persons = response;
       console.log(this.persons);},
     (error) => (console.log(error))
   );
 }

  onOpenProfileModule(person: Person){
    this.personWhosContactIsBeingUpdated = person;
    console.log(person + "is being added to " + this.personWhosContactIsBeingUpdated);
  }

}

Answer 1

我尝试使用 {{personWhosContactIsBeingUpdated.First_Name}} ，但出现错误无法找到未定义的 First_Name。通过更改为 {{personWhosContactIsBeingUpdated?.First_Name}}，错误消失了，我的模式现在可以正确更新。