Angular ngFor 只显示循环数据中的一个名称答案

【问题标题】：Angular ngFor only showing one name from the data in loopAngular ngFor 只显示循环数据中的一个名称
【发布时间】：2020-09-21 13:18:04
【问题描述】：

我的 component.ts 文件中有这些数据来自 api 调用

[ 
    [ 
        { 
            "name": "name one",
            "desc": "something here",
        },
        {
            "name": "name two",
            "desc": "something here",
        },
        { 
            "name": "another name",
            "desc": "something here",
        }
    ]
]

然后我将它传递给我的 component.html：

this.mydata = [result];

[结果]包含以上数据。

然后我有选择：

<select name="list">
    <option *ngFor="let data of mydata; value="{{ data.name }}">{{ data.name }}</option>
 </select>

我遇到的这个问题是选择没有填充任何名称

我添加了这个：{{ mydata | json }}，我可以看到数据如上所示。

我该如何解决这个问题？

【问题讨论】：

请发一张{{ mydata | json }}的截图。
应该是this.mydata = result[0];
试试this.mydata = result;
您当前正在将结果数组包装在另一个数组中。只需使用this.mydata = result;
问题应该只是你有一个数组嵌套为另一个数组的元素，所以正如约翰所说 *ngFor="let data of mydata[0]" 应该可以解决问题

标签： angular typescript angular9

【解决方案1】：

看起来您正在创建另一个数组包装器[]。它会导致您发布的方式类似于[[...]]。而是从此处删除 []：

this.mydata = result; // <---actual data may look like this = [{}, {}, ...]

【讨论】：

这给了我：“对象”类型可以分配给极少数其他类型。您的意思是改用“任何”类型吗？

【解决方案2】：

您的数据是一个嵌套数组。因此，当您遍历 myData 属性时，又会出现一个数组，并且没有 name 和 desc 可用。试试这个：

this.mydata = result[0];

【讨论】：

this.mydata = result[0] 给出了我的错误：“仅允许数组和可迭代对象”
请 console.log this.myData 这样我就能更好地理解你的问题
控制台显示如下：[ {}, {}, {} ] 展开时 0: {} 1: {} 2: {}
没有soutlion作品

【解决方案3】：

分配mydata 时出现问题。目前，mydata 与 result 值相同。如果您按以下方式更新，那么您的代码将起作用。

this.mydata = result[0];

或

const [result] = [ 
    [ 
        { 
            "name": "name one",
            "desc": "something here",
        },
        {
            "name": "name two",
            "desc": "something here",
        },
        { 
            "name": "another name",
            "desc": "something here",
        }
    ]
];
this.mydata = result;

然后以角码显示数据。

<select name="list">
    <option *ngFor="let data of mydata;" value="{{ data.name }}">{{ data.name }}</option>
 </select>

关于您的问题，定义 *ngFor 时缺少双引号。

【讨论】：

this.mydata = result[0] 给出了我的错误：“只允许数组和可迭代”
然后试试这个。（结果为任何[]）[0]；
返回错误：只允许使用数组和可迭代对象
那就这样试试吧。 (Array.from (result))[0]
返回：类型“{}”缺少类型“any[]”的以下属性：length、pop、push、concat 和另外 26 个。