Question

有两个“选择”组件。第一个部分显示年份，第二个部分显示事件名称。显示年份的组件的数据类型为“数字”（即，数据以“ 2018”的形式输出）。第二个组件具有事件的名称，必须与年份一致（仅此处的日期以“日期”格式显示，即格式为2018-09-13）。因此，在选择年份时（从第一个组件“选择”中选择），第二个组件应显示与日期匹配的信息。我完全不知道该怎么做。你能告诉我如何实现吗？

String s = "2018-08-29"
try 
    {

        DateFormat formatter = new SimpleDateFormat("yyyy-MM-DD", Locale.ENGLISH);

        Date parse = formatter.parse(s);

        long time = parse.getTime();

    }catch (ParseException e) {

         e.printStackTrace();

    }

Answer 1

我想您应该在第一个选择组件和ngModel中添加click事件以存储年份值。

然后单击事件调用具有年份值的changeEventList函数。然后changeEventList函数使用年份值过滤typeEvents。

第二个组件仅显示已过滤的事件列表。

我在您的代码上添加了一些伪代码和注释。

<div class="row">
  <div class="col-md-6">
    <div class="pull-left">
      <label>Reporting period</label>
      <label for="favcity">
        <select id="favcity" name="select" (click)="changeEventList(selectedYear)" [(ngModel)]="selectedYear" >  // <= add year variable and click event when you choose any option values.
          <option *ngFor="let year of years" [value]="year.years">
            {{year.years}}
          </option>
        </select>
      </label>
    </div>
  </div>
  <div class="col-md-6 ">
    <div class="pull-right">
      <label>Type of event</label>
      <label for="favcity">
        <select id="favcity" name="select"  >
          <option *ngFor="let typeEvent of typeEvents" [value]="typeEvent.name">
            {{typeEvent.name}}
          </option>
        </select>
     </label>
    </div>
  </div>
</div>

在component.ts中

changeEventList(year){
    this.typeEvents = originalTypeEventList.filter(event => event.value.indexof(year) !== -1 )
}

Answer 2

在这种情况下，我认为我们应该使用（ngModelChange）事件而不是（click）事件。

changeEventList(year){
    //you can filter the list of events  as you want 
}

<div class="row">
  <div class="col-md-6">
    <div class="pull-left">
      <label>Reporting period</label>
      <label for="favcity">
        <select id="favcity" name="select" (ngModelChange)="changeEventList(year)" [(ngModel)]="year" >  // <= add year variable and click event when you choose any option values.
          <option *ngFor="let year of years" [value]="year.years">
            {{year.years}}
          </option>
        </select>
      </label>
    </div>
  </div>
  <div class="col-md-6 ">
    <div class="pull-right">
      <label>Type of event</label>
      <label for="favcity">
        <select id="favcity" name="select"  >
          <option *ngFor="let typeEvent of typeEvents" [value]="typeEvent.name">
            {{typeEvent.name}}
          </option>
        </select>
     </label>
    </div>
  </div>
</div>

如何从两个组成部分“选择”中选择数据？

2 个答案: