Я не могу получить доступ к элементам ng-repeat внутри директивы

Question

У меня есть проблема с Angular. Я только недавно начал использовать Angular, поэтому пока не знаю всего, что нужно знать. Я использую AGM (Angular Google Maps) и пытаюсь добавить маркеры на карту следующим образом:

<agm-map> ... </agm-map>

внутри:

<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>

это работает. Однако, когда я пытаюсь динамически добавить маркеры из списка данных в моем component.ts, он говорит, что не может читать... из неопределенного.

<agm-marker *ngFor="let item in data" [latitude]="item.point_lat" [longitude]="item.point_lng"></agm-marker>

Я предполагаю, что к этому предмету пока нет доступа. Но я не могу понять, как это должно..

РЕДАКТИРОВАТЬ: Когда я запускаю это, данные отображаются, как ожидалось.

<tr *ngFor="let item of data">
    <th>{{item.point_lat}}</th> //51.34454736511800 
    <td>{{item.point_lng}}</td> //4.32184512840880
</tr>

Answer 1

Решение Shadowlauch и OP.

item.point_lat & item.point_lng являются строками. В то время как <agm-marker> ожидает цифры. Я написал функцию в component.ts

stringToNumber(val: number) {
    return Number(val);
}

и преобразовал строку в число как:

<agm-marker *ngFor="let item of data" [latitude]="stringToNumber(item.point_lat)" [longitude]="stringToNumber(item.point_lng)"></agm-marker>