让我们开发一个 Angular 应用程序 – 创建模型类并访问数组元素
这是作为我的“让我们开发一个 Angular 应用程序”系列文章的一部分发布的第 4 篇文章。
请阅读我的第一篇文章，了解我们在本系列文章中要完成的工作。
要阅读我之前的文章，请单击此处 >> #3 – Angular 项目创建 – 自行车租赁门户
在本文中，我们将执行以下 3 个任务，
- 创建一个简单的模型类
- 创建一组硬编码的自行车详细信息
- 使用 ngFor 使用数组详细信息复制自行车列表框组件
让我们创建模型类来保存我们的自行车数据。
首先在 Src 文件夹中创建一个打字稿文件“bike.model.ts”并创建一个类“Bike”。
然后创建类变量，如下图所示。
下一步是在 App.component.ts 文件中创建一个 Bikes 数组。
bikeList: Bike[] = [
new Bike('Hayabusa','Susuki','15L',312),
new Bike('Ninja H2','Kawasaki','33.0L',300),
new Bike('Mt 09','Yamaha','12.0L',200)
]; import { Bike } from './bike.model'; 请参阅屏幕截图以获得清晰的图片。
现在，自行车数据存储在 App 组件的“bikeList”数组中 – 父组件
我们的下一个动作是遍历这个数组元素并将每个数组元素传递给bike-list-box组件——子组件
要遍历数组元素，我们可以使用 ngFor 语句。
打开 ‘app.component.html’ 文件并使用 *ng For 语句创建一个 <div>
*ngFor="let bikeEl of bikeList" 请参阅下面的屏幕截图。
在这里，’bikeList’ 是我们在 app.component.ts 文件中创建的数组。
而且，bikeEl 是存储每个数组项的局部变量。
保存所有更改并在浏览器中检查我们的应用程序。
我们将看到如下屏幕截图所示的屏幕。
正如我们所见，循环按预期工作了 3 次（数组中只有 3 个元素），并且子组件“bike-list-box”被调用了 3 次。
结论
在本文中，我们为自行车实体创建了模型类，并创建了一个 Bike 类型的数组。然后，我们创建了 3 个 Bike 对象并插入到数组中。
然后，我们访问模板文件中的数组元素并循环遍历数组元素。
在这里，我们使用数组中的硬编码数据。我们将很快将其更改为 Angular 服务。
在下一篇文章中，我们将看到如何将数组元素从 app 组件传输到 bike-list-box 组件。（父母对孩子）
然后我们将在bike-list-box 组件中显示每个数组元素的详细信息。
要阅读我的下一篇文章，请点击这里>> #5 – Angular 组件通信
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
