角度映射数据的问题答案

【问题标题】：Issue with mapping data in angular角度映射数据的问题
【发布时间】：2022-01-05 16:29:39
【问题描述】：

我正在尝试将数据从我的 nodejs api 映射到 angular。我需要将 '_id' 字段从 mongoDB 转换为 'id' 角度。我在尝试映射时遇到错误，我不知道为什么。

这是我获取数据的服务方法：

    getAddresses(addressesPerPage: number, currentPage: number) {
        const queryParams = `?pagesize=${addressesPerPage}&page=${currentPage}`;
        this.http
            .get<{ message: string; adddresses: any; maxAddresses: number }>(
                `${ORDERS_ADDRESS_URL}/${queryParams}`
            )
            .pipe(
                map((addressData) => {
                    return {
                        address: addressData.adddresses.map(
                            (address: {
                                _id: string;
                                firstName: string;
                                lastName: string;
                                email: string;
                                phone: string;
                                street1: string;
                                street2: string;
                                street3: string;
                                city: string;
                                state: string;
                                zip: string;
                                country: string;
                                notes: string;
                                creator: string;
                            }) => {
                                return {
                                    id: address._id,
                                    firstName: address.firstName,
                                    lastName: address.lastName,
                                    email: address.email,
                                    phone: address.phone,
                                    street1: address.street1,
                                    street2: address.street2,
                                    street3: address.street3,
                                    city: address.city,
                                    state: address.state,
                                    zip: address.zip,
                                    country: address.country,
                                    notes: address.notes,
                                    creator: address.creator,
                                };
                            }
                        ),
                        maxAddresses: addressData.maxAddresses,
                    };
                })
            )
            .subscribe((transformedAddressData) => {
                this.addresses = transformedAddressData.address;
                this.addressesUpdated.next({
                    address: [...this.addresses],
                    addressCount: transformedAddressData.maxAddresses,
                });
            });
    }

当我发出请求时，我成功地从我的服务中取回数据： { "message": "地址获取成功！", “地址”：[ { "_id": "61d5bbe6334f61f04eec36ed", "firstName": "约翰", "lastName": "史密斯", “电子邮件”：“jsmith@gmail.com”， “电话”：“123-456-7891”， "street1": "123 Somewhere Street", "street2": "23 套房", "street3": "222 号楼", “城市”：“金斯敦”， “状态”：“MA”， “邮编”：“02364”， “国家”：“美国”， "notes": "Donec rutrum congue leo eget malesuada. Proin eget tortor risus.", “创作者”：“61c9df529202251a482c8192”， “__v”：0 } ], “最大地址”：1 }

我得到的错误是“ERROR TypeError: Cannot read properties of undefined (reading 'map')”

【问题讨论】：

addressData 或 addressData.adddresses 未定义
这能回答你的问题吗？ How to avoid 'cannot read property of undefined' errors?
“地址”中有三个 d...
@WillAlexander 你是正确的，解决了我的问题，谢谢。我不敢相信我错过了谢谢！
不用担心 :-) 有时我们会陷入我们的代码中，甚至无法再阅读它。我可以建议你投资一个像样的 IDE 吗？ ^^ 他们发现了这种错别字并给你一个漂亮的红色下划线（甚至一些建议！）

标签： javascript angular rxjs

【解决方案1】：

我改变了这个： .get<{ message: string; adddresses: 对此： .get<{ message: string; addresses:

还有这个： address: addressData.adddresses.map( 对此： address: addressData.addresses.map(

根据@WillAlexander 的建议

【讨论】：

【解决方案2】：

如果你只需要映射一个属性，使用'...'（传播/破坏）

this.http
    .get < {
        message: string;adddresses: any;maxAddresses: number
    } > (
        `${ORDERS_ADDRESS_URL}/${queryParams}`
    )
    .pipe(
        map(addressData => {
            addressData.adddresses.map((ad) => ({
                ...ad, // add existing value
                id: ad._id // adds new value
            }))
        ).subscribe((updateAddress) => {
        });

【讨论】：