在Angular下拉菜单中显示日期数组

如何解决在Angular下拉菜单中显示日期数组

在Angular中，我从JsonFile检索时间戳，然后我想在下拉菜单中显示它，但是我不知道如何从ngOnInit（）中获取变量，以将其传递给变量，以供我使用下拉菜单。我将占位符放在“来自ngOnInit（）的时间戳记”下的代码中，它必须是字符串。

这是search.component.ts文件：

 times: Timestamp[] = [
    { value: 'timestamp from ngOnInit()',viewValue: 'timestamp from ngOnInit()' },];

  this.Service.getContent().then(results => {

      this.data = results;

  for (let i = 0; i < this.data.length; i++) {

    Object.entries(this.data[i].x_data).map(([key,value]) => {
      //timestamp
      this.xvalue = this.data[i].timestamp
   
      //converted timestamp to date & time
      this.date = moment(this.data[i].timestamp).format('DD-MM-YYYY HH:mm:ss').toLocaleString();


      this.strTimestamp = String(this.xvalue)
      this.strDate = String(this.date)

      return {
        timestamp: this.strTimestamp,date: this.strDate,}

    });

      }

    })

  }

html文件：

<form>   
    <mat-form-field appearance="fill">
      <mat-label>Select timestamp <mat-icon>access_time</mat-icon></mat-label>
      <mat-select [(ngModel)]="selectedValue" name="food">
        <mat-option *ngFor="let time of times" [value]="time.value">
          {{time.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <p> Selected timestamp: {{selectedValue}} </p>
  </form>
  

解决方法

给定模板，您的component.ts应该创建一个名为 this.times应该是包含以下形式的对象的数组： { value: ...,viewValue: ...}。

现在，您正在创建对象{timestamp: ...,date: ...}的数组，并且没有将其分配给组件中的实例变量。