m0_71681226 2022-11-17 00:16 采纳率: 100%
浏览 32
已结题

angular制作一个根据患者Id查询患者的方法,患者数据写不到页面上。

angular制作一个根据患者Id查询患者的方法,患者数据写不到页面上。
患者数据是用数组储存的。


```typescript
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" }
    ];
    const result: any[]= [];

我做的搜索方法:

```typescript
search(Id: string){
 const index = Patient.indexOf(Id);   
   var item = Patient [index];  
   
const result = Patient.filter(function (item) {
if (item.Id== Id) {
    return true;
    } else {
    return false;
}
})
console.log(result);


           
}


html:

   
Search a patient by ID
<label for="Patient_IDText3">Enter patient_ID: </label> <input type="text" id="patient_IDText3" [(ngModel)]="patient_IDText3" [ngModelOptions]="{standalone: true}"/> <input type="button" value="Search" (click)="search(patient_IDText3)">

在页面输入ID在控制台是可以看见搜到数据的:

img

可当我尝试新做一个表格来显示这个搜到的数据时它报错。
我尝试的代码:

<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 result of result">
        <td>{{ result.Id }}</td>
        <td>{{ result.FirstName }}</td>
        <td>{{ result.LastName }}</td>
        <td>{{ result.DateOfBirth }}</td>
        <td>{{ result.Gender }}</td>
        <td>{{ result.PrimaryInsurance }}</td>
        <td>{{ result.Address }}</td>
        <td>{{ result.ContactNumber }}</td>
        <td>{{ result.NextOfKin }}</td>
         </tr>
    </tbody>
  </table>


错误:

img


于是我尝试在AppComponent里声明了一下result:

result=result;

img


它报这个错,于是我加了this.

img


它报这个错。
于是我尝试新建一个空数组result,html表格里绑定result数组里的数据,当使用search方法时将filter出来的数据加到result数组里。

search(Id: string){
 const index = Patient.indexOf(Id);   
   var item = Patient [index];  
   
const re = Patient.filter(function (item) {
if (item.Id== Id) {
    return true;
    } else {
    return false;
}
})
console.log(re);
 result.push({ Id: this.re.Id,
        FirstName:this.re. FirstName,
        LastName: this.re.LastName,
        DateOfBirth: this.re.DateOfBirth,
        Gender: this.re.Gender,
        PrimaryInsurance:this.re.PrimaryInsurance,
        Address:this.re.Address,
        NextOfKin:this.re.NextOfKin
});

           
}

但它又报这个错

img


问题好像又回到原点了。
请问该怎么解决这个问题让网页可以显示搜索出来的数据?

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-11-17 09:06
    关注

    改下面的试试

    
    
        let result: any[] = [];//不能用const,要不search里面赋值错误,改let
        search(Id: string){
            //const index = Patient.indexOf(Id);
            //var item = Patient[index];
            //这里不用加const,加上就是内部变量了,直接修改上面的result全局变量
           /*const*/ result = Patient.filter(function (item) {
                if (item.Id == Id) {
                    return true;
                } else {
                    return false;
                }
            })
            console.log(result);
    
        }
    
    

    最后一个尝试是因为re是内部变量,不需要加this

    
        search(Id: string){
            //const index = Patient.indexOf(Id);//这里有问题,上个问题已经说过,Patient是对象数组,Id是字符串,直接indexOf找不到下标的,index为-1
            //var item = Patient[index];//index为-1,这里item就变为undefined了
    
            //而且找数组中对象直接用find就行,不用获取下标,改下面这样
            var item = Patient.find(i => i.Id == Id);
            result.length = 0;//删除结果数组中所有项
            if (item != undefined) {//找到,压入结果
                result.push(item);
            }
    
            /*
    
            const re = Patient.filter(function (item) {
                if (item.Id == Id) {
                    return true;
                } else {
                    return false;
                }
            })
            console.log(re);
            result.push({
                Id: this.re.Id,
                FirstName: this.re.FirstName,
                LastName: this.re.LastName,
                DateOfBirth: this.re.DateOfBirth,
                Gender: this.re.Gender,
                PrimaryInsurance: this.re.PrimaryInsurance,
                Address: this.re.Address,
                NextOfKin: this.re.NextOfKin
            });*/
        }
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 11月25日
  • 已采纳回答 11月17日
  • 创建了问题 11月17日

悬赏问题

  • ¥15 超声波 合成孔径 扩散角
  • ¥20 matlab中的双层数值积分
  • ¥50 服务器打印水晶报表问题
  • ¥15 Delphi image图片缩放问题
  • ¥30 gradle环境下javafx项目如何使用druid连接池
  • ¥15 服务器打印水晶报表问题
  • ¥15 初学者用plt报错,求解答
  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退