似乎无法让我的模态访问 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);
}
}
最佳答案
我尝试使用 {{personWhosContactIsBeingUpdated.First_Name}} ，但出现错误无法找到未定义的 First_Name。通过更改为 {{personWhosContactIsBeingUpdated?.First_Name}}，错误消失了，我的模式现在可以正确更新。
关于javascript - (Angular) 在 Bootstrap Modal 中访问 Typescript 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50398516/