Question

我必须比较两个日期，即：当前日期和存储在json文件中的日期，然后显示名称。我已经附上了为此所需的相关文件。

birthday.component.html

  <div class="birthday-slider">
    <owl-carousel
     [options]="options"
     [carouselClasses]="['owl-theme', 'sliding']">
         <div class="item" *ngFor="let birthday of birthdays;let i = index" >
            <div class="person" >
            <div class="name">{{birthday.name}}</div>
            <a [href]="'mailto:'+birthday.email"class="wish"><img src="assets/img/birthdaysicon.png" alt="Wish Birthday Icon" /></a>
        </div>
     </div>
    </owl-carousel> 
  </div>

birthday.component.ts

import { Component, OnInit } from '@angular/core';
import { LoggerService } from '../../core/services/logger-service';
import { HomeService } from '../../core/services/home.service';
import { AppConstants } from '../../shared/constants/app.constants';


@Component({
  selector: 'app-birthday',
  templateUrl: './birthday.component.html',
  styleUrls: ['./birthday.component.scss']
})
export class BirthdayComponent implements OnInit {
  options;
  today = new Date();
  dateFormat = AppConstants.dateFormat;
  birthdayList = [];

  constructor(private logger: LoggerService, private homeService: HomeService) {

  }

  ngOnInit() {
    this.initCarousel();
    this.getBirthdayList();
  }

  initCarousel() {
    this.options = {
      items: 4,
      dots: false,
      nav: true,
      slideBy: 4,
      loop: false,
      autoplay: false,
      autoplayTimeout: 15000,
      navText: ['<span class=\'icon icon-font-icon_right\'>', '<span class=\'icon icon-font-icon_right\'>'],
    };
 }
 getBirthdayList() {
  this.homeService.getBirthdayList().subscribe(res => {
    this.logger.log(res);
    this.birthdayList = res.data;
  });
}
}

服务文件如下所示

   getBirthdayList() {
      const url = Url.jsonData.basePath + Url.jsonData.birthday;
        return this.http.doAsyncTask(url, 'GET').map(response => {
            return response;
        });
  }

由于我是角刚6的新手，因此非常感谢大家的帮助。

Answer 1

html像这样

  <div class="birthday-slider">
    <owl-carousel
     [options]="options"
     [carouselClasses]="['owl-theme', 'sliding']">
         <div class="item" *ngFor="let birthday of birthdayList;let i = index" >
            <div class="person" >
            <!-- <div class="round-img" [style.background-image]="'url('+birthday.img+')'"></div> -->
            <div class="name">{{birthday.name}}</div>
            <a [href]="'mailto:'+birthday.email"class="wish"><img src="assets/img/birthdaysicon.png" alt="Wish Birthday Icon" /></a>
        </div>
     </div>
    </owl-carousel> 
  </div>

.ts文件看起来像这样。

import { Component, OnInit } from "@angular/core";
import { LoggerService } from "../../core/services/logger-service";
import { HomeService } from "../../core/services/home.service";
import { AppConstants } from "../../shared/constants/app.constants";

@Component({
  selector: "app-birthday",
  templateUrl: "./birthday.component.html",
  styleUrls: ["./birthday.component.scss"]
})
export class BirthdayComponent implements OnInit {
  options;
  dateFormat = AppConstants.dateFormat;
  birthdayList = [];
  today = new Date();
  curDate = new Date().getDate();

  constructor(
    private logger: LoggerService,
    private homeService: HomeService
  ) {}

  ngOnInit() {
    this.initCarousel();
    this.getBirthdayList();
  }

  initCarousel() {
    this.options = {
      items: 4,
      dots: false,
      nav: true,
      slideBy: 4,
      loop: false,
      autoplay: false,
      autoplayTimeout: 15000,
      navText: [
        "<span class='icon icon-font-icon_right'>",
        "<span class='icon icon-font-icon_right'>"
      ]
    };
  }
  getBirthdayList() {
    this.homeService.getBirthdayList().subscribe(res => {
      this.logger.log(res);
      this.birthdayList = res.data;
      this.birthdayList = this.birthdayList.filter(item => {
        return item.bdaydate == this.curDate;
      });
      console.log(this.birthdayList);
    });
  }
}

比较今天的日期和json中的日期，然后显示名称

1 个答案: