Arrays *数组中的ngIf检查值

刚接触爱奥尼亚和安格鲁，但希望有人能帮我

我有以下数据：

"messages" : [ 
        {
            "sender" : "24",
            "name" : "James",
            "datetime" : ISODate("2019-11-10T20:42:02.090Z"),
            "message" : "test 1",
            "read" : [ 
                {
                    "uid" : "24",
                    "name" : "James",
                    "datetime" : ISODate("2019-11-10T20:42:02.090Z")
                },
                {
                    "uid" : "45",
                    "name" : "Paul",
                    "datetime" : ISODate("2019-11-13T11:32:45.010Z")
                }
            ]
        }]

在ionic中，我当前有数据作为“邮箱”传递，“uid”是用户的id

        <ion-item *ngFor="let message of mailbox">
            <ion-item [routerLink]="['/members/mailbox', message.sid" routerDirection="forward">
                {{ message.name}}
                <br />Posted: {{ message.datetime }}
                <div *ngIf="(message.read[0]['uid'] == uid || message.read[1]['uid'] == uid)">READ</div>
            </ion-item>
        </ion-item>

我想要的是一种更好的编写ngIf的方法，例如messages.read可以有多行。有没有办法只检查messages.read中是否找到uid的值？我曾经玩过角度过滤器，但没有成功

---

非常感谢

这是一个javascript问题，不是一个有角度的问题，但要回答您的问题，您可以

---

*ngIf=message.read.filterx=>x.uid==uid.length

这是一个javascript问题，不是一个角度问题，但要回答您的问题，您可以

---

*ngIf=message.read.filterx=>x.uid===uid.length

您应该能够

let isUidPresent = messages.read.findIndex(reader => reader.uid === uid) > -1

然后在你的HTML上

*ngIf="isUidPresent"

---

你应该能做到

let isUidPresent = messages.read.findIndex(reader => reader.uid === uid) > -1

然后在你的HTML上

*ngIf="isUidPresent"

---

创建并使用带有参数的自定义管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'in'
})
export class InPipe implements PipeTransform {

    transform(value, array:any[]) : boolean {
        return array.indexOf(value) != -1;
    }

}

@Pipe({
  name: 'map'
})
export class MapPipe implements PipeTransform {

  transform(array: any[], mapFn):array {
    return array.map(filterFn);
  }

}

您的*.component.ts：

...
_mapFn(read):string{
  return read['uuid'];
}
mapFn = _mapFn.bind(this);
...

isRead = false;
uid;

getEmails() {
    this.webAPI.getEmails().subscribe(s => {
        this.mailbox = s;
        isRead = s.read.some(r => r.uid == uid );
    })

}

您的模板：

<div *ngIf="(message.read[0]['uid'] == uid
<div *ngIf="uuid|in:(message.read|map:mapFn)">...</div>

---

旁注：如果在如下模板中实现它：message.read.mapread=>returnread['uuid']；。INDEXOFUID！=-1.然后angular将在每个更改检测过程中调用这两个函数。这将非常糟糕，并且每次都会降低应用程序的速度。这就是为什么需要编写管道。仅当引用对象uuid、message.read change时，才调用函数。

创建并使用带有参数的自定义管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'in'
})
export class InPipe implements PipeTransform {

    transform(value, array:any[]) : boolean {
        return array.indexOf(value) != -1;
    }

}

@Pipe({
  name: 'map'
})
export class MapPipe implements PipeTransform {

  transform(array: any[], mapFn):array {
    return array.map(filterFn);
  }

}

您的*.component.ts：

...
_mapFn(read):string{
  return read['uuid'];
}
mapFn = _mapFn.bind(this);
...

isRead = false;
uid;

getEmails() {
    this.webAPI.getEmails().subscribe(s => {
        this.mailbox = s;
        isRead = s.read.some(r => r.uid == uid );
    })

}

您的模板：

<div *ngIf="(message.read[0]['uid'] == uid
<div *ngIf="uuid|in:(message.read|map:mapFn)">...</div>

---

旁注：如果在如下模板中实现它：message.read.mapread=>returnread['uuid']；。INDEXOFUID！=-1.然后angular将在每个更改检测过程中调用这两个函数。这将非常糟糕，并且每次都会降低应用程序的速度。这就是为什么需要编写管道。仅当引用对象uuid、message.read时调用函数。

无论是否读取字母，都可以创建一个变量来存储值。然后检查邮箱阵列中是否包含uid：

您的.component.ts：

...
_mapFn(read):string{
  return read['uuid'];
}
mapFn = _mapFn.bind(this);
...

isRead = false;
uid;

getEmails() {
    this.webAPI.getEmails().subscribe(s => {
        this.mailbox = s;
        isRead = s.read.some(r => r.uid == uid );
    })

}

HTML:

---

无论是否读取字母，都可以创建一个变量来存储值。然后检查邮箱阵列中是否包含uid：

您的.component.ts：

...
_mapFn(read):string{
  return read['uuid'];
}
mapFn = _mapFn.bind(this);
...

isRead = false;
uid;

getEmails() {
    this.webAPI.getEmails().subscribe(s => {
        this.mailbox = s;
        isRead = s.read.some(r => r.uid == uid );
    })

}

HTML:

---

最好将繁重的工作留给.ts文件

你可以用这样的东西

在您的.ts文件中

validateId(message: Object) {
    return message["read"].find(x => x.uid === uid);
  }

和in.html

<ion-item *ngFor="let message of mailbox">
            <ion-item [routerLink]="['/members/mailbox', message.sid" routerDirection="forward">
                {{ message.name}}
                <br />Posted: {{ message.datetime }}
                <div *ngIf="validateId(message)">READ</div>
            </ion-item>
        </ion-item>

---

最好将繁重的工作留给.ts文件

你可以用这样的东西

在您的.ts文件中

validateId(message: Object) {
    return message["read"].find(x => x.uid === uid);
  }

和in.html

<ion-item *ngFor="let message of mailbox">
            <ion-item [routerLink]="['/members/mailbox', message.sid" routerDirection="forward">
                {{ message.name}}
                <br />Posted: {{ message.datetime }}
                <div *ngIf="validateId(message)">READ</div>
            </ion-item>
        </ion-item>

---

参考已接受的答案，我将避免在模板中调用函数，因为它将在每次更改检测时被调用，即多次调用，并且您将它放在ngFor中，因此影响更大。如果这是一小部分数据，而页面中没有太多其他内容，那么在模板中使用函数就可以了，但我希望尽可能避免使用它：

如果我正确理解了您的数据结构，那么在您的数组/用户中基本上只能有一个可能的读取匹配，因为用户不能将消息标记为多次读取。如果是这种情况，那么您可以执行嵌套的ngFor，您可以使用ng容器将其标记为不在模板中实际创建元素，除非需要

因此，我建议如下：

{{message.name} 已发布：{message.datetime} 阅读

---

参考已接受的答案，我将避免在模板中调用函数，因为它将在每次更改检测时被调用，即多次调用，并且您将它放在ngFor中，因此影响更大。如果这是一小部分数据，而页面中没有太多其他内容，那么在模板中使用函数就可以了，但我希望尽可能避免使用它：

如果我正确理解了您的数据结构，那么在您的数组/用户中基本上只能有一个可能的读取匹配，因为用户不能将消息标记为多次读取。如果是这种情况，那么您可以执行嵌套的ngFor，您可以使用ng容器将其标记为不在模板中实际创建元素，除非需要

因此，我建议如下：

{{message.name} 已发布：{message.datetime} 阅读

---

谢谢你的回复。我得到以下控制台错误。解析器错误：绑定不能在[message.read.filterx=>x.uid===uid.length]的第31列包含赋值。谢谢您的回复。我得到以下控制台错误。分析器错误：绑定不能在[message.read.filterx=>x.uid===uid.length]中的第31列包含赋值。我们希望在.html文件中完成这一切，但会满足于此解决方案。谢谢。我们希望在.html文件中完成这一切，但会满足于此解决方案。干杯