Как установить идентификатор для элемента, который соответствует заданному значению?

Question

У меня в Angular 7 следующее:

<th *ngFor="let day of weekDays"><div>{{day}}</div></th>

, но хотите установить <th id="today" для одного элемента среди всех weekDays, что соответствует / равно today.

Учитывая, что:

  this.today = "Fri 5/7";

Результат должен быть:

<th id="today"><div>Fri 5/7</div></th>
<th><div>Sat 6/7</div></th>
<th><div>Sun 7/7</div></th>
<th><div>Mon 8/7</div></th>
<th><div>Tue 9/7</div></th>
<th><div>Wed 10/7</div></th>
<th><div>Thu 11/7</div></th>

Как мне это сделать?

Answer 1

Попробуйте что-то вроде этого

 <th *ngFor="let day of weekDays" [attr.id]="today==day?'today':null"><div>{{day}}</div></th>

Answer 2

Вы должны вызвать функцию, которая устанавливает идентификатор в зависимости от даты:

<th *ngFor="let day of weekDays" [attr.id]="returnStringBasedOnCondition()"><div>{{day}}</div></th>

и вы можете использовать следующие ссылки, чтобы получить today:

Как проверить, совпадает ли дата ввода с сегодняшней датой?

получить текущую дату в формате 'гггг-мм-дд' в Angular 4

Answer 3

Вы можете добавить условно такой атрибут. Если null удалит ваш атрибут:

<th *ngFor="let day of weekDays" 
    [attr.id]="value === day ? 'today' : null">
    <div>{{day}}</div>
</th>

Answer 4

Вы можете сделать что-то подобное:

<th *ngFor="let day of weekDays" [id.today]="isToday()"><div>{{day}}</div></th>

И, конечно, добавьте функцию isToday() в вашу машинопись. Я обычно использую условные классы и никогда не пробовал использовать условные идентификаторы, но это должно сработать.