Angular 应用中的周数未获得正确的日期值

Question

我正在做一个规划项目，我使用 datefns 库。我有一个函数可以给出一年中的周数。问题是当我点击选定的周（下拉菜单）时，它没有给出正确的日期。我想显示所选周的第一天和最后一天。现在我只能显示第一天。如何显示所选周的正确日期和所选周的最后一天？

这是我的 ts 代码：

export class AppComponent implements OnInit {
  selectedWeek! : Date;
  weeks!: any[];
  display = false;
  date =  new Date(); //null

 constructor() {}

  ngOnInit(): void {
    this.selectedWeek = new Date();
    this.weeks = this.getWeeks();
  }
  getWeeks() {
    const startDate = new Date(new Date().getFullYear(), 0, 1); // first day of the year
    console.log(startDate);

    const endDate = new Date(new Date().getFullYear(), 11, 31); // last day of the year
    console.log(endDate);

    // How many full weeks are between end date & start date
    var result = [];
    const count = differenceInWeeks(endDate, startDate);
    result = Array.from({ length: count }, (_, i) => `Week ${i + 1}`);

    console.log('array of weeks', count);
    return result;
  }

  changeWeek(week: Date) {
    let date = week;
    this.selectedWeek = date;
    this.weeks = this.getWeeks();
    this.display = true;
  }
}

还有我的模板代码

<h2 style="margin: 10px 0px 0px 100px"> Planner</h2>

    <div class="plannerHeader" role="row">
    <div class="planner" style="width:160px" >
      <div class="weekOptions" ngbDropdown>
        <div
          class="chevron"
          id="navbarScrollingDropdown"
          ngbDropdownToggle
          data-no-icon="true"
        >
          <span *ngIf="!display">Week {{ date | date: 'w' }}</span>
          <span *ngIf="display">{{ selectedWeek }}</span>
        </div>
        <ul
          class="dropdown-menu"
          ngbDropdownMenu
          aria-labelledby="navbarScrollingDropdown"
        >
          <li
            ngbDropdownItem
            *ngFor="let week of weeks"
            class="dropdown-item"
            (click)="changeWeek(week)"
          >
             <div>{{ week }}</div>
           </li>
        </ul>
      </div>
    
    </div>
      <div class="plannerBottom">
        <p>
          From <b>{{ selectedWeek | date: 'd MMMM yyyy' }}</b> to
          <b>{{ selectedWeek | date: 'd MMMM yyyy' }}</b>
        </p>
      </div>
    </div>

这是我的工作演示 StackBlitz。

Answer 1

我已经按照您的解释进行了更改以使这项工作正常进行，我已经分叉了您的 StackBlitz 项目，因此您可以看到更新后的 version here。

主要变化是订单项点击事件的方式和周列表的生成方式。生成的列表使用对象数组（具有日期和标签）。

将所选日期移动到它自己的状态并添加一个单独的函数来处理日期信息的填充（一周的开始和结束）允许生成周列表的逻辑更容易和一次性操作.

Angular 应用中的周数未获得正确的日期值

Number of weeks are not getting the right value of date in Angular app

angular

date-fns