以角度操作json数组答案

【问题标题】：manipulate json array in angular以角度操作json数组
【发布时间】：2020-12-07 06:03:19
【问题描述】：

如何在 typescript 中打印数组中的特定值？我在打字稿中有以下代码：

import { AngularFirestore } from '@angular/fire/firestore';

export class ProfileComponent implements OnInit {
    myArray: any[] = [];

    constructor(public afs: AngularFirestore) {}
    emailtoprint = "sadasd@assf.co";

    test = this.afs.collection('doctors').get().subscribe((ss) => {
        ss.docs.forEach((doc) => {this.myArray.push(doc.data()); });
     });
}

emailtoprint 的电子邮件以 html 格式打印，如下所示：

<div *ngFor='let i of myArray'>
    <div *ngIf="i.email == emailtoprint">{{i.email}}</div>
</div>

如您所见，我可以使用 ngIf 找到相应的电子邮件...虽然，如果 myArray 有很多值，这并不是最佳选择。我想知道如何从打字稿角度的数组中获取特定值？我尝试了以下方法，但得到一个空输出：

test3 = this.myArray.find(e => e.email === emailtoprint);

当我这样做时，这是为 myArray 找到的实体

<li *ngFor="let i of myArray">
   {{i | json}}
</li>

{ "firstName": "Df", "lastName": "Sdf", "email": "sadasd@assf.co"}

{ "firstName": "Anna", "lastName": "Sims", "email": "doctor@hotmail.com"}

{ "firstName": "John", "lastName": "Adad", "email": "nurse@hotmail.com" }

【问题讨论】：

我们可以知道您的 this.myArray 中的示例数据吗？ :) 由于您的 .find() 是正确的，而且我认为 this.myArray 数据中的某些内容可能会因其结构而被忽略
我更新了我的问题以显示我的数组数据。从另一个角度来看，我认为最好只能使用 emailtoprint 获取数据库中的列，当我执行 test = this.afs.collection('doctors').get().subscribe((ss) => { ss.docs.forEach((doc) => {this.myArray.push(doc.data()); }); }); 但我不知道该怎么做时
您需要myArray提供的所有信息吗？
我只需要sadasd@assf.co的专栏
我尝试了以下但它打印 [Object object] test2 = this.afs.collection('doctors', ref => ref.where('email', '==', this.email));

标签： arrays angular typescript

【解决方案1】：

您不能在订阅的服务调用中分配variable。相反，您可以像这样实现它。

您可以使用以下任一方法：

方法#1

this.afs
   .collection('doctors')
   .get()
   .subscribe(({ docs }) => {

      // Replicating what you did by and invoking the data function 
      const data = docs.map(({ data }) => data());

      // If you use .find() , it will give you an object which you can't loop through
      this.myArray = data.find(({ email }) => email === this.emailtoprint);

      // or
    
      // If you use .filter(), it will give you an array, but i say if finding only 1 data, it's best to use .find
      this.myArray = data.filter(({ email }) => email === this.emailtoprint);


      // Console to check the result
      console.log(this.myArray);
    });

方法#2

或者，如果您仍想获取原始数据数组并为电子邮件匹配设置一个单独的变量，您可以这样做：

userMatch: any;

...
.subscribe(({ docs }) => {
   this.myArray = docs.map(({ data }) => data());

   this.userMatch = this.myArray.find(({ email }) => email === this.emailtoprint);


   // Console and check the data
   console.log(this.myArray);
   console.log(this.userMatch);
});

【讨论】：

谢谢你的回答，虽然我仍然没有用这两种方法打印任何东西......我试图在 html 中像这样打印对象 userMatch ：<div>{{userMatch}}<div> 并且什么都没有出现
已经创建了一个示例 stackblitz 演示供您参考，但我在这里假设服务调用的返回结果是一个数组，但最好知道我是否可以知道您的示例响应的结构从您的 "this.afs.collection('doctors').get()" 以符合 stackblitz 演示示例。这是链接：stackblitz.com/edit/ngx-sampe-data?file=src/app/…

【解决方案2】：

Find 会为您获取一个对象，但您需要根据电子邮件进行过滤，因此将 find() 替换为 filter() 如下：

test3 = this.myArray.filter(e => e.email === emailtoprint);

【讨论】：