Angular 11-数据绑定数组项

Question

我正在尝试对 Ripe 类型元素的某些属性进行数据绑定：

export interface Ripe{
    version: string;
    data_call_status: string;
    cached: boolean;
    data: {
        is_less_specific: boolean,
        announced: boolean,
        asns: [{asn: number,
                holder: string}];
        related_prefixes: [];
        resource: string;
        type: string;
        block: {
            resource: string;
            desc: string;
            name: string;
        };
        actual_num_related: number;
        query_time: string;
        num_filtered_out: number;
    }
    query_id: string;
    process_time: number;
    server_id: string;
    build_version: string;
    status: string;
    status_code: number;
    time: string;
}

我在我的 html 文档中用于数据绑定的组件中设置了一个 Ripe 类型的 elementRipe。例如，如果要对已宣布的属性进行数据绑定，我会写（在 html 文档中）：

{{elementRipe.data.announced}}

一切正常，值已读取。现在我正在尝试数据绑定位于 asns 内部的 holder 属性，这是一个只有一个元素的数组（我无法更改它，这是 API 的设置方式）。我试着写这个：

{{elementRipe.data.asns.holder}}

但未找到该值。在这种情况下正确的语法是什么？

Answer 1

我会选择这样的东西。

{{elementRipe.data.asns[0]?.holder}}

因为你需要访问数组中的元素，你可以添加问号以防有一天你没有任何值。

Answer 2

asns是一个数组，所以需要取第一个元素

{{ elementRipe.data.asns[0]?.holder }}

或者为数组中的所有持有者映射数组

{{ elementRipe.data.asns.map( object => (object?.holder)) }}

（我没有在 HTML 上尝试这个语法，但在 ts 中确实有效）

Angular 11-数据绑定数组项

Angular 11- Data-binding an array item

html

data-binding

angular