* ng За то, что не работает с моим массивом при отображении в шаблоне

Question

Я пробовал отображать содержимое с помощью * ngFor как в таблице, так и в отдельных компонентах, но ничего не работает. не могли бы вы помочь? на моем компоненте у меня есть это

public get locs(): Address[] {
        var addr: Address[] = [{ id: 0, priceQuickDelivery: 0, DeliveryTime: "3456", name: "samwel", price: 0 }];
        return addr;
    }
changeLocation(id: any) {
        console.log("locations id", id);

        this.currentLocation = this.locations.filter(f => {
            f.id == id
        })[0];
        console.log("selected location:", this.currentLocation);

    }

, а в моем шаблоне это:

<table>
        <tbody>
            <tr *ngFor="let loc of locs">
                <td>value</td>
                <td>{{loc.name}}</td>
                <td>{{loc.id}}</td>
            </tr>
        </tbody>
    </table>

    <div >
        <select #SelectLocation (change)="changeLocation(SelectLocation.value)">
            <option value="0">Choose Location</option>
            <option *ngFor="let location of locs"> {{location}}</option>
        </select>
    </div>

моя модель адреса выглядит следующим образом:

export class Address {
    public id: number;
    public name: string;
    public price: number;
    public priceQuickDelivery: number;
    public DeliveryTime: string;
    constructor() { }
}

мой вывод выглядит следующим образом введите описание изображения здесь

Answer 1

Вы не использовали свойство в *ngFor сменить на

<option *ngFor="let location of locs" value={{location.id}}> {{location.name}}</option>

Stackbliz demo https://stackblitz.com/edit/angular-ivy-6p9fbh

Answer 2

Поскольку местоположение - это список объектов

Использование этого <option *ngFor="let location of locs"> {{location}}</option> ничего не отобразит, поскольку местоположение является объектом, и вы можете получить [Object, Object]

Вместо этого используйте свойства местоположения, а не само местоположение, т.е.

<option *ngFor="let location of locs"> {{location.name}}</option>

Конечно, он заполнит ваш список