如何从对象数组中获取所有乘客名称并显示为title属性值？

这事儿好办！你之前遇到的问题很典型：

• 示例1里car.passengers?.name返回undefined，是因为passengers是数组，数组本身没有name属性，得遍历数组里的每个对象才行；
• 示例2只取了passengers[0]，自然只能拿到第一位乘客。

要把所有乘客名称拼成字符串作为title，直接在Angular模板里用数组的map和join方法就能搞定，还得加上可选链和兜底处理，避免空值报错：

<td [title]="car.passengers?.map(passenger => passenger.name).join(', ') || '暂无乘客'">
  <strong>{{ car }}</strong>
</td>

代码细节说明： #

1. car.passengers?.map(...)：用可选链?.防止passengers为null或undefined时触发报错，map方法遍历数组，把每个乘客对象转换成它的name属性值；
2. .join(', ')：把提取出来的所有名字用「逗号+空格」拼接成一个连贯的字符串；
3. || '暂无乘客'：如果passengers是空数组，或者所有乘客都没有有效name值，就显示兜底文本避免title为空。

如果担心有些乘客的name是空值（比如undefined或空字符串），还可以先过滤掉无效项：

<td [title]="car.passengers?.filter(p => p.name).map(p => p.name).join(', ') || '暂无乘客'">
  <strong>{{ car }}</strong>
</td>

这样就能完美展示所有有名字的乘客啦！

内容的提问来源于stack exchange，提问作者Jean