html - 从数据库检索的对象数组中获取结果并返回到 ng-template

Question

我有一个从数据库中检索到的复杂对象数组

Link to the Code

let arr = [
    {
        "userId": "-jgtgjS",
        "firstName": "def",
        "lastName": "yellow",
        "email": "def@gm.com",
        "otp": 0,
        "otpExpiry": "",
        "mobileNumber": 9852145987,
        "createdOn": "2019-09-15T11:50:29Z",
        "gender": "female",
        "profilePic": "",
        "friendList": {
            "_id": "5d7e25852fffaa2858930878",
            "userId": "-jgtgjS",
            "friendCount": 0,
            "userObject": "5d7e25852fffaa2858930877",
            "allFriends": [
                {
                    "friendId": "GsbItTr",
                    "requestSent": true,
                    "requestReceived": false,
                    "friendSince": 1568549711731,
                    "_id": "5d7e2b2f25207f161c718a64",
                    "friendObject": "5d7e285aa6132b179cfa917c"
                },
                {
                    "friendId": "ch4PXXn",
                    "requestSent": false,
                    "requestReceived": true,
                    "friendSince": "",
                    "_id": "5d7f16124c7b3f16ec308c1d",
                    "friendObject": "5d7dce8d2a719a1d188ed641"
                }
            ],
            "__v": 2
        }
    }]

Link to the Code

我正在使用 *ngFor在我的模板中显示 friend ，但我还需要显示他是否是 friend ，我如何通过 *ngFor 的实例在显示到 .ts 之前，然后计算 bool 值，然后返回到模板，以便显示的用户是 friend 还是不是 friend 。

添加了图片。现在按钮显示在每个使用 ngFor 中添加 friend .但是根据每个用户的状态，如果收到请求，按钮会变为接受，或者如果请求已经被接受，它会显示给 friend ，并且 friendSince有一定的值(value)

我能够得到这样的状态。

ar[0].friendList.allFriends.forEach(element=>{
    if (element.friendId=='ch4PXXn'){
        sent=element.requestSent;
        received=element.requestReceived;
    }
});

如果您引用添加的图像..您可以看到使用 *ngfor 的 View 中列出了许多用户。 “def yellow”就是其中之一。现在在用户对象内部有另一个对象数组，它存储所有发生的好友请求交易。用户 ID“ch4PXXn”正在查看此 View ​​。因此，我需要在 allFriends 中找到对象，其 friendId 包含 ch4PXXn，然后基于其他参数(如发送、接收、自此)。我想显示一个按钮，该按钮将为用户 ch4PXXn 提供接受或显示已发送请求的选项。

Link to the Code

Answer 1

像这样尝试:

<div *ngFor="let friend of arr">
    <h3>{{friend.firstName}} {{friend.lastName}}</h3>
    <h4>{{friend.gender}} </h4>
    <h5>{{friend.email}} </h5>
    <h5>{{friend.mobileNumber}} </h5>
    <table>
        <tr>
            <th>Friend Id </th>
            <th>Is Friend </th>
        </tr>
        <tr *ngFor="let item of friend.friendList.allFriends">
            <td>{{item.friendId}}</td>
            <td>{{item.friendSince == '' ? 'Not Friend' : 'Friend'}}</td>
        </tr>
    </table>
</div>

Working Demo