ionic4数组的索引

曾经终败给现在 2022-02-05 02:45 227阅读 0赞

# 前言 #

所谓数组，是有序的元素序列。用于区分数组中的各个元素的数字编号称为下标。在平常的使用中，我们可以根据下标去获取或者修改数组中的值，那么在ionic中，我们如何使用数组的下标呢？

# 需求 #

在如下这张图片中，我希望一个菜可以对应一个加减按钮，当选择哪个菜，只需要点击后面的加减按钮，此时只有这个菜的数量会发生变化，其他没有选择的菜的数量还会保持不变。  
  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

# 分析 #

很显然，图片中的几个菜我们可以理解为一个数组，数组中一个有5个元素，选择一个菜时，我们只需要知道选择的这个菜的下标，根据这个下标去加减即可。

# 实现 #

如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]  
  1）声明的一个num数组：

// 每个菜的数量，定义为一个数组，其长度等于食物列表的长度
      public num = [];

2）给num赋值：

this.foodList.forEach(element => {
    		this.num.push(0);
    	});

3）根据上图中获取索引并且调用方法。

# 总结 #

类型与类型之间应该相匹配，食物列表就是一个数组，那么对应的食物数量也应该是一个数组，然后在想办法得到其索引值就可以了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20220205/00084b70824e41449eb12c11269ed5ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: /images/20220205/226ff2d8d93346fd9f8468cca864268c.png