Как добавить значение индекса массива Dynami c на странице angular html

Question

Я новичок в angular Я хочу добавить динамическое c значение индекса массива на странице html. Я пробовал другое решение, я не получаю решения. Я также не получаю никакой ошибки.

Я создал массив в машинописи, как показано ниже

мой машинопись

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

вышеупомянутый массив, который я хочу передать c значение индекса на странице html. Я пытался, но я не получаю значение.

Я пытался вот так {{ months[ result.startDate.split('/')[1] ] }}. Если я наберу stati c значение индекса, оно будет работать.

html page

 <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"

, пожалуйста, помогите мне

заранее спасибо

Answer 1

Вот почему это не работает. Вам нужно удалить 0 из 04 перед тем, как поместить значение в массив month.

Выполнить анализ индекса с помощью parseInt перед передачей его в массив month.

Пожалуйста, смотрите пример ниже. Это в ядре JS.

Дайте мне знать, если вы хотите в формате angular, я создам для вас 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]);

Пожалуйста, проверьте эту ссылку для примера в angular - Пример

Answer 2

Попробуйте так:

. html

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

.ts

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

Рабочая демонстрация

Answer 3

Еще один подход - преобразование вашего объекта, поэтому startDate и endDate становятся Date

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

И используют pipeDate

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

Answer 4

компонент. html

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

component.ts

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