使用 Angular 10 在输入字段中显示 json 数据

编程问答 2022-05-10

问题描述

我有一个用户键入并成功提交的表单。我希望用户能够通过单击编辑图标来编辑该表单并编辑用户数据，我已经设法从 api 中提取数据，但是当我尝试分配访问权限时，它们都是空的，我最终出现未定义的错误，我做错了什么？

到目前为止我做了什么

   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;
      }

当我控制台日志 console.log("the dats is",this.ticketData); 的 json 是在那里

[    
   {
      "id": "4e600c3d-efed-43c2-b395-6238510dda24","title": "Test","assignedTo": "tester@gmail.com","description": "Test","resolution": null,"country": "USA","projectID": "ABC","teamId": "901","eaId": "901","countryId": "0001","priority": "Urgent","status": "Open","lab": null,"category": "Duplicate","content": null,"impact": null,"dateCreated": 1619313188806,"createdBy": "tester@gmail.com"
    }
]

这是控制台日志快照

enter image description here

为什么这会给我 undefined 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>

解决方法

您的端点将结果作为对象数组而不是单个对象返回，您可以在控制台日志中注意到这一点。日志以“[”开头，表示数据是数组。

您可以通过访问数组的第一个元素然后将其分配给工单数据来解决这个问题：

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();

}

,

你应该这样使用

.....

ticketData: any;
ticketDataParsed: any;
title: string;

.....

// Parse from JSON 
this.ticketDataParsed = JSON.parse(this.ticketData);
this.title = this.ticketDataParsed.title

已编辑

由于控制台日志代表一个数组，因此您需要像这样访问数组对象属性：

this.ticketData[0].title
angularangularangular-ngmodeltypescripttypescripttypescript