如何在角度 html 页面中添加动态数组索引值答案

【问题标题】：How to add dynamic array index value in angular html page如何在角度 html 页面中添加动态数组索引值
【发布时间】：2020-04-07 07:04:11
【问题描述】：

我是 Angular 新手，我想在 html 页面中添加动态数组索引值。我尝试了不同的解决方案我没有得到解决方案。我也没有收到任何错误。

我在打字稿中创建了一个数组，如下所示

我的打字稿

months : string[] = ['January','February','March','April','May','June','July','August','September','October','November','December'];

上面的数组我想在html页面中传递动态索引值。我试过了，但我没有得到价值。

我试过这样 {{ months[ result.startDate.split('/')[1] ] }} 。如果我输入静态索引值，它正在工作。

html页面

 <div class="row" style="width: 110%;" *ngFor="let result of allEvents">

              <p class="start-date" >{{ result.startDate.split('/')[0]  }} </p> <br><p  >{{  months[ result.startDate.split('/')[1]  ]  }} </p>

        </div>

我得到的结果对象

0:
_id: "5e8b033bd3d04a24db92288a"
name: "Casting call for kannada movie"
description: "Looking for:↵Female artist Age: 17-26↵Kids Age :4-12"
startTime: "6"
endTime: "21"
startDate: "04/04/2020"
endDate: "31/05/2020"
participant: []
userId: "5e536de00d691f6427bcaec1"
pageId: {profileImage: {…}, coverPage: {…}, isBlocked: false, softDelete: false, isVerified: true, …}
createdAt: "2020-04-06T10:23:55.874Z"
updatedAt: "2020-04-06T10:23:55.874Z"

请帮帮我

提前致谢

【问题讨论】：

显示result对象
@sigmato，请控制台 result.startDate.split('/')[1] 并查看输出
@AdritaSharma 我已经粘贴了对象
@AlokMali 如果我只显示 result.startDate.split('/')[1] 我得到的价值是 04
@sigmato 您的预期输出是什么？对于startDate: "04/04/2020"，你想在模板中显示什么？

标签： javascript angular

【解决方案1】：

这就是为什么它不起作用。在将值放入 month 数组之前，您需要从 04 中删除 0。

在将索引传递到month 数组之前，先使用parseInt 解析您的索引。

请看下面的例子。它在核心 JS 中。

让我知道，如果您希望它采用角度格式，我将为您创建一个 stackblitz 示例

var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var result = {};
result.startDate = "04/04/2020";
var key = parseInt(result.startDate.split('/')[1]);
console.log(months[key]);

请查看此链接以获取角度示例 - Example

【讨论】：

我试过了，但它不起作用。你能给我一个角度格式吗？这将是hepfull
如果我这样显示{{ months[ (04) ] }} 它工作正常。但不是动态的
请稍等，我正在创建一个角度示例。稍后我会分享一个链接。
@sigmato，我添加了示例链接，请查看。
非常感谢您帮助兄弟现在它的工作。我从昨天开始就在尝试这个。终于解决了，再次感谢

【解决方案2】：

试试这样：

.html

<p class="start-date" > </p> <br><p>{{getMonthName(result.startDate) }} </p>

.ts

getMonthName(month) {
  return this.months[(parseInt(month.split("/")[1])-1)];
}

Working Demo

【讨论】：

不客气。请添加-1，否则您将获得 04 的 5 月，这应该是 4 月（数组以 0 开头：D）

【解决方案3】：

component.html

 <div> {{getMonthName(result.startDate) }} </div>

component.ts

getMonthName(date) {
    return this.months[(new Date(date).getMonth())]
  }

【讨论】：

【解决方案4】：

另一种方法是转换您的对象，因此 startDate 和 endDate 变为 Date

allEvents.forEach(x=>{
   x.startDate=new Date(x.startDate)
   x.endDate =new Date(x.endDate )
})

并使用 pipeDate

{{result.startDate| date:'MMM'}}

【讨论】：