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

Question

在 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>
  

Answer 1

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

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