Angular 在输入字段中以角度10显示json数据
我有一个表单,用户输入并成功提交。我希望用户能够通过单击编辑图标编辑该表单并编辑用户数据,我已设法从api中提取数据,但当我尝试将访问值分配给所有为空的值时,我最终会出现未定义的错误我做错了什么 到目前为止我做了什么Angular 在输入字段中以角度10显示json数据,angular,typescript,angular-ngmodel,Angular,Typescript,Angular Ngmodel,我有一个表单,用户输入并成功提交。我希望用户能够通过单击编辑图标编辑该表单并编辑用户数据,我已设法从api中提取数据,但当我尝试将访问值分配给所有为空的值时,我最终会出现未定义的错误我做错了什么 到目前为止我做了什么 async ngOnInit(): Promise<void> { this._activatedroute.paramMap.subscribe(params => { this.id = params.get('id'
async ngOnInit(): Promise<void> {
this._activatedroute.paramMap.subscribe(params => {
this.id = params.get('id');
});
let user = this.service.getUserSession();
if (user != null) {
this.project = user.currentProject.id;
}
this.userSession = this.userSessionService.getSession("usersession");
this.projectId = this.userSession.currentProject.id;
this.totalTeamsData = await this.teamService.getTeamList(this.projectId);
await this.getTicketData();
}
async getTicketData(): Promise<void> {
this.ticketData = await this.ticketService.getTicket(this.id, this.projectId);
await this.toggleTicketDetails();
}
toggleTicketDetails() {
console.log("the dats is", this.ticketData); //this shows the data from the api with all the fields
console.log("the dats is", this.ticketData.title); //this shows undefined
this.title = this.ticketData.title;
this.description = this.ticketData.description;
this.teamId = this.ticketData.teamId;
this.totalTeamsData.forEach(async (data: string) => {
if (data === this.teamId) {
this.totalTeamMembersData = await this.teamService.getTeamMembers(this.projectId, this.teamId);
this.totalEAData = await this.teamService.getTeamEAList(this.projectId, this.teamId);
}
});
this.assignedTo = this.ticketData.assignedTo;
this.eaId = this.ticketData.eaId;
this.countryId = this.ticketData.countryId;
this.projectId = this.ticketData.projectID;
this.country = this.ticketData.country;
this.priority = this.ticketData.priority;
this.category = this.ticketData.category;
this.status = this.ticketData.status;
this.lab = this.ticketData.lab;
this.impact = this.ticketData.impact;
this.content = this.ticketData.content;
this.resolution = this.ticketData.resolution;
}
这是一个控制台日志快照
为什么这给了我未定义的this.title=this.ticketData.title代码>和所有其他
HTML示例
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="title" style="color: black;">Title<span style="color: red;">*</span></label>
<input type="text" class="form-control" style="color: black;"
required id="title" name="title" [(ngModel)]="title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="description" style="color: black;">Description<span style="color: red;">*</span></label>
<textarea type="text" class="form-control" rows="3" style="color: black;"
required id="description" name="description" [(ngModel)]="description">
</textarea>
</div>
</div>
</div>
头衔*
描述*
您应该这样使用
.....
ticketData: any;
ticketDataParsed: any;
title: string;
.....
// Parse from JSON
this.ticketDataParsed = JSON.parse(this.ticketData);
this.title = this.ticketDataParsed.title
已编辑
由于控制台日志表示一个数组,因此您需要访问数组对象属性,如下所示:
this.ticketData[0].title
this.ticketData = (await this.ticketService.getTicket(this.id, this.projectId))[0];
let dump = await this.ticketService.getTicket(this.id, this.projectId);
if(!dump && dump.length==0)
{
//Notify the user of empty data
}
else {
this.ticketData = await this.ticketService.getTicket(this.id, this.projectId);
await this.toggleTicketDetails();
端点以对象数组而不是单个对象的形式返回结果,您可以在控制台日志中注意到这一点。日志以“[”开头,表示数据是数组
您可以通过访问数组的第一个元素,然后将其分配给票证数据来解决此问题,如下所示:
this.ticketData[0].title
this.ticketData = (await this.ticketService.getTicket(this.id, this.projectId))[0];
let dump = await this.ticketService.getTicket(this.id, this.projectId);
if(!dump && dump.length==0)
{
//Notify the user of empty data
}
else {
this.ticketData = await this.ticketService.getTicket(this.id, this.projectId);
await this.toggleTicketDetails();
当然,您可以检查空响应数组以提供更好的用户体验,如下所示:
this.ticketData[0].title
this.ticketData = (await this.ticketService.getTicket(this.id, this.projectId))[0];
let dump = await this.ticketService.getTicket(this.id, this.projectId);
if(!dump && dump.length==0)
{
//Notify the user of empty data
}
else {
this.ticketData = await this.ticketService.getTicket(this.id, this.projectId);
await this.toggleTicketDetails();
}在将响应分配给this.ticketData
之前,您是否分析了响应?您可以在this.toggleTicketDetails()
之前删除等待。您是否检查了this.ticketData
的类型?Hi@iamentafaz它是一个数组,那么您应该使用this.ticketData[0]
访问property@arriff请将您的代码放入stackblitz
进行调试。您好@Salahuddin仍然没有定义。您可以将this.ticketData
从api中显示的数据以及所有字段显示出来吗?您可以将它放入this.title=this.ticketData.title;
的中吗
看看会发生什么?