m0_71681226 2022-11-15 22:03 采纳率: 100%
浏览 27
已结题

angular制作一个添加患者的方法无法新增患者。

angular制作一个添加患者的方法无法新增患者。
我用angular制作了一个增加患者的一个方法,数据储存在一个数组中,当我在网页输入数据时,显示不出来我新增的数据(不确定有没有把新数据存在数组里)。
app.component.ts:


```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myapp';
  Patient = Patient;
  patient_IDText:string="";
  patient_IDText2:string="";
  FirstNameText:string="";
  LastNameText:string="";
  DateOfBirthText:string="";
  GenderText:string="";
  PrimaryInsuranceText:string="";
  AddressText:string="";
  ContactNumberText:string="";
  NextOfKinText:string="";

add(){
Patient.push(   [
                this.patient_IDText2,
                this.FirstNameText,
                this.LastNameText,
                this.DateOfBirthText,
                this.GenderText,
                this.PrimaryInsuranceText,
                this.AddressText,
                this.ContactNumberText,
                this.NextOfKinText]);
                return Patient;      
}

}
const Patient: any[]= [
    { Id: "0", FirstName: "Stark", LastName: "Bill", DateOfBirth: "2000/10/11", Gender: "Male", PrimaryInsurance: "Medicare", Address: "ddadsdasd", ContactNumber: "1338872818738", NextOfKin: "weqe" },
    { Id: "1", FirstName: "Shown", LastName: "Jenny", DateOfBirth: "2000/10/11", Gender: "Male", PrimaryInsurance: "Medicare", Address: "ddadsdasd", ContactNumber: "1338872818738", NextOfKin: "weqe" },
    { Id: "2", FirstName: "Geogrge", LastName: "Hash", DateOfBirth: "2000/10/11", Gender: "Male", PrimaryInsurance: "Medicare", Address: "ddadsdasd", ContactNumber: "1338872818738", NextOfKin: "weqe" },
    { Id: "3", FirstName: "Intwre", LastName: "zaiwoo", DateOfBirth: "2000/10/11", Gender: "Male", PrimaryInsurance: "Medicare", Address: "ddadsdasd", ContactNumber: "1338872818738", NextOfKin: "weqe" },
    { Id: "4", FirstName: "Niko", LastName: "baby", DateOfBirth: "2000/10/11", Gender: "Male", PrimaryInsurance: "Medicare", Address: "ddadsdasd", ContactNumber: "1338872818738", NextOfKin: "weqe" }
    ];
    

app.component.html:

```html
<body><h1 class="title">patient data</h1>
<p><a routerLink="/second">client-side web</a> | <a routerLink="/third">admin-side web</a></p><router-outlet></router-outlet></body>
`<table class="list-table">
    <thead>
      <th>Patient ID*</th>
      <th>First name*</th>
      <th>Last name*</th>
      <th>Date of birth *</th>
      <th>Gender*</th>
      <th>Primary insurance*</th>
      <th>Address *</th>
      <th>Contact number *</th>
      <th>Next of kin</th>
    </thead>
    <tbody>
      <tr *ngFor="let patient of Patient">
        <td>{{ patient.Id }}</td>
        <td>{{ patient.FirstName }}</td>
        <td>{{ patient.LastName }}</td>
        <td>{{ patient.DateOfBirth }}</td>
        <td>{{ patient.Gender }}</td>
        <td>{{ patient.PrimaryInsurance }}</td>
        <td>{{ patient.Address }}</td>
        <td>{{ patient.ContactNumber }}</td>
        <td>{{ patient.NextOfKin }}</td>
        <td> <button class="button" (click)="delete(patient.Id)">Remove</button></td>
         </tr>
    </tbody>
  </table>
  <label for="patient_IDText">Patient ID*: </label>
<input type="text" id="patient_IDText" [(ngModel)]="patient_IDText" [ngModelOptions]="{standalone: true}"/> 
<input type="button" value="Delete" (click)="delete(patient_IDText)">
 
 <h5>Insert a book</h5>
<label for="patient_IDText2">Patient ID*:</label>
<input type="text" id="patient_IDText2" [(ngModel)]="patient_IDText2" [ngModelOptions]="{standalone: true}"/> 
<br/>
<label for="FirstNameText">First name*:</label>
<input type="text" id="FirstNameText" [(ngModel)]="FirstNameText" [ngModelOptions]="{standalone: true}"/> 
<br/>
<label for="LastNameText">Last name*:</label>
<input type="text" id="LastNameText" [(ngModel)]="LastNameText" [ngModelOptions]="{standalone: true}"/> 
<br/>
<label for="DateOfBirthText">Date of birth *:</label>
<input type="text" id="DateOfBirthText" [(ngModel)]="DateOfBirthText" [ngModelOptions]="{standalone: true}"/> 
<br/>
<label for="GenderText">Gender*:</label>
<input type="text" id="GenderText" [(ngModel)]="GenderText" [ngModelOptions]="{standalone: true}"/> 
<br/>
<label for="PrimaryInsuranceText">Primary insurance*:</label>
<input type="text" id="PrimaryInsuranceText" [(ngModel)]="PrimaryInsuranceText" [ngModelOptions]="{standalone: true}"/>
<br/>
<label for="AddressText">Address *:</label>
<input type="text" id="AddressText" [(ngModel)]="AddressText" [ngModelOptions]="{standalone: true}"/>
<br/>
<label for="ContactNumberText">Contact number *:</label>
<input type="text" id="ContactNumberText" [(ngModel)]="ContactNumberText" [ngModelOptions]="{standalone: true}"/>
<br/>
<label for="NextOfKinText">Next of kin:</label>
<input type="text" id="NextOfKinText" [(ngModel)]="NextOfKinText" [ngModelOptions]="{standalone: true}"/>
<br/>
<input type="button" value="Insert" (click)="add()"/> 


当我在网页输入数据并点击insert按钮时列表中显示了新的一行但里面没有数据。

img

请问该怎么解决这个问题?

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-11-15 22:15
    关注

    压入对象而不是数组,并且加上键名称

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月17日
  • 已采纳回答 11月15日
  • 创建了问题 11月15日

悬赏问题

  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因