Angular 11-数据绑定数组项

Posted 2023-02-23

【中文标题】Angular 11-数据绑定数组项

【英文标题】：Angular 11- Data-binding an array item

【发布时间】：2021-07-02 10:39:33

【问题描述】：

我正在尝试对 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;

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

elementRipe.data.announced

一切都很好，值被读取。现在我正在尝试对 asns 中的 holder 属性进行数据绑定，这是一个只有一个元素的数组（我无法更改它，这就是 API 的设置方式）。我试着写这个：

elementRipe.data.asns.holder

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

【参考方案1】：

我会选择这样的。

elementRipe.data.asns[0]?.holder

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

【参考方案2】：

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

 elementRipe.data.asns[0]?.holder 

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

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

（我不会在 HTML 上尝试这个 sintax，但在 ts 中可以正常工作）