（IONIC - Angular）我如何在 html 卡片中仅显示符合特定条件的 JSON 中的某些对象？

Posted 2023-03-13

【中文标题】（IONIC - Angular）我如何在 html 卡片中仅显示符合特定条件的 JSON 中的某些对象？

【英文标题】：(IONIC - Angular) How can i show in html cards, only certain objects from a JSON that match certain criteria?

【发布时间】：2020-11-12 09:40:03

【问题描述】：

我是 ionic/angular 的菜鸟，我试图从 JSON 中检索一些数据，并通过卡片 () 在 html 中显示它

JSON 包含许多“deTurno == true”或“deTurno == false”的对象

到目前为止我有这个：

public data: any;
public test: any;
public testTwo: any;

constructor(private apiService: ApiService) 
  this.apiService.getFarmacias().subscribe(
      (data) => 
        this.data = data;
        
        for (const item of this.data) 
          if (item.deTurno == true) 
            
             // copy the item inside this.test

           else 
             
             // copy the item inside this.testTwo

          

         

      
  );

我想要的是获取 JSON 中与“deTurno == true”匹配的每个项目，并将它们放入测试中，这样我就可以使用测试在 HTML 中显示这些项目，如下所示：

<ion-card *ngFor="let dataItem of test">
    <ion-card-header>
        <ion-card-subtitle>dataItem.direccion</ion-card-subtitle>
        <ion-card-title>dataItem.nombre (De turno hoy)</ion-card-title>
        <h5>Localidad: dataItem.localidad</h5>
        <h4>dataItem.telefono1</h4>
    </ion-card-header>
</ion-card>

我只需要显示那些匹配“deTurno == true”的项目，然后对匹配“deTurno == false”的项目做一些事情，否则我会只显示“数据”中的每个项目

请帮忙:(

【问题讨论】：

有什么问题/错误？您在服务中将它们分开的评论逻辑很好。您是否因为 test 未定义而收到错误消息？

问题是我不知道如何执行我在 FOR 循环中评论的内容，仅将带有“deTurno == true”的元素从 JSON 复制到新的对象数组中，所以然后我可以改用那个数组。我尝试过类似 this.test.push(item) 但它说“没有未定义的“推送”属性……我不知道该怎么做

您没有定义测试，您只是说它具有任何类型。我已经添加了有关如何正确执行此操作的答案。

天哪，非常感谢，我已经尝试解决这个问题 10 个小时了！

【参考方案1】：

你的问题是

public test: any;

你没有定义测试，所以当你试图推送它时，它是未定义的。

public data: any[] = [];
public test: any[] = [];
public testTwo: any[] = [];

constructor(private apiService: ApiService) 
  this.apiService.getFarmacias().subscribe(
      (data) => 
        this.data = data;
        
        for (const item of this.data) 
          if (item.deTurno == true) 
            
             // copy the item inside this.test
             this.test.push(item);

           else 
             
             // copy the item inside this.testTwo
             this.testTwo.push(item);


          

         

      
  );