Question

这是我在堆栈溢出时的第一个问题

我只是想知道以下案例的简单解决方案

<div *ngFor="let d of w.event">
<div class="date" id="d.date" >
              <p>
                <span style="font-size:1.75em">{{d.date | date:'dd'}}</span>
                <br>
                <strong>&nbsp;{{d.date | date:'EEE'}}</strong>
              </p>
            </div>

循环div可以具有相同的id 我只想显示具有特定日期的第一个div而忽略其余的日期可以用CSS或JavaScript实现吗

Answer 1

您不能在两个元素上使用相同的id。这是对id s。

的少数限制之一

您可以使用课程：

<div class="show">Yes</div> <div class="show">No</div>

...然后在获取匹配元素列表后使用索引0或索引1显示第一个或第二个：

var list = document.querySelectorAll(".show");
list[0].style.display = "none"; // Hides the first one
// or
list[1].style.display = "none"; // Hides the second one

其他一些想法：

1。您可以添加一个隐藏元素的类，而不是像上面那样使用style.display。

2。您可以为元素使用单独的id s（或类），这样您就不需要索引，例如：

<div id="show-yes">Yes</div> <div id="show-no">No</div>

然后

document.getElementById("show-yes").style.display = "none";
// or
document.getElementById("show-no").style.display = "none";

根据我的经验，您可以使用querySelectorAll之类的选择器对您的无效HTML执行上述第一项操作（使用"[id=show]），但不。改为修改HTML。

在您的问题更新中，您会显示：

<div *ngFor="let d of w.event">
<div class="date" id="d.date" >
...

你已经说过你已经意识到你不能拥有相同id的多个元素，那为什么代码呢？您可以轻松地为其提供唯一的id s：

<div *ngFor="let d of w.event; let i = index">
<div class="date" id="d.date{{i}}" >
...

Answer 2

首先，在HTML ID中是一个唯一的选择器，因此一个ID只能与一个元素相关联。如果要实现所需的功能，则必须为两个DIV分配不同的ID。并使用javascript来隐藏和显示DIV

<div id="showYes">Yes</div> <div id="showNo">No</div>

Answer 3

如果您想一次显示一个，可以使用*ngIf，因为它一次只显示一个

<div id="show" *ngIf='your_status'>Yes</div> 
<div id="show" *ngIf='!your_status'>No</div>

更新问题后，您可以创建仅返回唯一日期的自定义过滤器，因此只会显示第一个唯一日期

// CREATE A PIPE FILTER :
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'checkUniqueDate'})
export class UniqueDatePipe implements PipeTransform {
  transform(dataArray) {
    let dates = [];
    return dataArray.filter(data => {
        return if(dates.indexOf(data.date) === -1) {
            dates.push(data.date);
            return true;
        } else {
            return false;
        }
    });
  }
}

// TEMPLATE SIDE :
<div *ngFor="let d of (w.event | checkUniqueDate )">

Answer 4

在课堂上添加日期，然后您可以尝试下面的代码

.YOUR_DATE{
    display:none
}
.YOUR_DATE:first-child{
    displany:inline
}

如何只显示一个具有相同ID的元素

4 个答案: