[Fixed] Angular 11- Data-binding an array item

Issue

I’m trying to data-bind certain properties of an element of type 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;
}

I got an elementRipe of type Ripe set in my component that I use in my html document for data-binding. For example if want to data-bind the announced property I’ll write (in the html document):

{{elementRipe.data.announced}}

Everything is fine, the value gets read. Now I’m trying to data-bind the holder property which is inside asns, an array with only one element (I can’t change that, it’s how the API is set up). I tried to write this:

{{elementRipe.data.asns.holder}}

but the value is not found. What’s the correct syntax in this case?

Solution

asns is an Array, so you need to take the first element

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

or map the array for all the holders in the Array

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

(I don’t try this sintax on HTML but surly works in ts)