*ngFor 在模板上显示时无法使用我的数组答案

【问题标题】：*ngFor not working with my array when displaying on template*ngFor 在模板上显示时无法使用我的数组
【发布时间】：2020-05-07 11:25:48
【问题描述】：

我尝试在表格和选择组件上使用 *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() { }
}

我的输出如下enter image description here

【问题讨论】：

使用{{location.name}}，否则显示[Object, Object]
在<option> 中您需要指定任何属性。如果不是，它将插入到完整的对象。试试<option *ngFor="let location of locs"> {{location.name}}</option>。它适用于这个 Stackblitz：stackblitz.com/edit/angular-ivy-h22kyn
好的，我知道为什么会出现错误，在完全不同的上，在我的模板中，我有一个“未定义”属性。我猜从角度来看，这甚至会影响之前的代码......还有......是的，我要写 location.name，太多的编辑/试验，直到我忘记了那部分

标签： angular ngfor

【解决方案1】：

你没有使用*ngFor中的属性改成

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

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

【讨论】：

可能是你的 api 返回空所以下拉显示为空

【解决方案2】：

因为位置是一个对象列表

使用此<option *ngFor="let location of locs"> {{location}}</option> 不会显示任何内容，因为位置是一个对象，您可能会得到[Object, Object]

而是使用位置属性而不是位置本身，即

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

它肯定会出现在您的列表中

【讨论】：

它拒绝填充，因为我在模板的下方有一个完全不同的错误