让我们开发一个 Angular 应用程序 – 在 Bike-Details 组件中显示自行车详细信息

让我们一个一个来做吧！

首先，在自行车模型类中再添加 2 个属性并相应地更新构造函数。

你可以参考下面的截图：

然后打开 app.component.ts 文件。会有一些错误。

我们需要为 2 个新添加的属性提供值。

我从互联网上复制了一些描述，并复制了我们新添加的属性的图像 URL。

我们的第一个工作项目已经完成。我们已经修改了我们的模型并相应地更新了应用程序组件中的自行车数组。

我们的下一个操作项是在自行车列表图块中显示自行车图像。

为了实现这一点，我们必须更新bike-list-box 组件的bike-list-box.component.html。

为此，我使用 t 类将自行车细节放在框的左侧和自行车图像的右侧。

• Pull-left
• Pull-right

请参考我下面的更改：

在这里，我使用了 2 个内部 div 元素。一方面，我使用了 pull-left 类，而 pull-right 用于其他类。然后，我们将旧内容移动到第一个 div 中，并将图像元素添加到第二个 div 中。在这里，语句 [src]=”bike.imagepath” 在 Angular 中称为属性绑定。我们可以使用插值方法来做同样的事情。然后语句将如下所示 src=”{{bike.imagepath}}” 要了解有关属性绑定和字符串插值的更多信息，请访问 此处。

保存文件并在浏览器中检查结果。我们将看到结果，如下面的屏幕截图所示。

比以前好多了，对！

第二个项目也完成了。让我们转到第三个操作项

我们的第三个行动计划是使自行车可点击。这是一个非常简单的任务。

只是我们必须将 <dev> 元素更改为 <a> 元素。

然后添加一个点击事件监听器和方法’selectBike()’。

请参阅以下屏幕截图中的更改。

如果您检查浏览器，我们将看到每个图块现在都是可点击的。

我们的第4个操作项是在另一个组件（bike-details组件）中显示所选自行车的完整自行车详细信息。

首先，我们可以处理bike-details组件。

打开 bike-details.component.html 文件并添加一些 HTML 语句以显示自行车详细信息，例如更大尺寸的自行车图像、名称、公司名称、描述等。

你可以参考下面我的 HTML 模板。我创建了 2 行并在第一行中显示了自行车图像，而其他自行车详细信息显示在第二行中。

请保存文件并在浏览器中检查应用程序以查看结果。

我们将看到如下屏幕截图所示的屏幕：

所以模板看起来不错。

下一步是将自行车详细信息从bike-list 组件传递到bike-details组件。

我们将在下一篇文章中实现这一点。

结论

在本文中，我们添加了一些更改，例如在每个图块中显示自行车图像。然后，我们创建了模板以在单击自行车图块时在新组件中显示自行车详细信息。在下一篇文章中，我们将把自行车细节从bike-tile-box 组件传递到bike-details 组件。

要阅读我的下一篇文章，请单击此处 >>  #9 – 在Bike-details组件中显示自行车详细信息