javascript - Angular 值更改 - 设置属性然后更新 ngFor - 不起作用

Question

我得到了一个感觉非常简单的组件。我调用一个 API，它返回一个对象数组，其中有很多对象。加载到属性后，我有一个选择列表，用户可以从中选择一个套件，然后使用值更改，过滤属性并将结果保存到新属性，然后使用 ngfor 迭代这些值。但是，即使值更改有效并且名称已更新，主表也不会填充值。不明白为什么

//////TS/////

export class SchedulesComponent implements OnInit {
  // PAGINATION
  scheduleItemsFound;
  currentPage = 1;
  itemsPerPage = 10;
  pageSize: number;

  scheduleSelectForm: FormGroup;
  suiteSchedule;
  chosenSuiteName;
  schedules;
  suites = [
    'Stage 1',
    'Suite 1',
    'Suite 2',
    'Suite 3',
    'Suite 4',
    'Suite 5',
    'Suite 6',
    'Suite 7',
    'Suite 8',
    'Suite 9',
    'Suite 10',
    'Suite 11',
    'Audio Edit Asst 1',
    'Audio Edit Asst 2',
    'Audio Edit Asst 3',
    'Audio Edit Asst 4',
    'Audio Edit 1',
    'Audio Edit 2',
    'Audio Edit 3',
    'Audio Offsite Edit',
    'Audio Offsite Mix',
    'AE Avid 1',
    'AE Avid 2',
    'AE Avid 3',
    'Transfer 1',
    'Transfer 2',
    'Transfer 3',
    'QC Bay 1'
  ];
  constructor(
    private _scheduleService: ScheduleService,
    private _fb: FormBuilder
  ) {
    // Initialize form
    this.scheduleSelectForm = this._fb.group({
      scheduleSelect: ['']
    });
  }

  ngOnInit() {
    // Get schedules
    this._scheduleService.getSchedules().subscribe(
      response => {
        this.schedules = response['schedules'];
      },
      error => console.log(error['message'])
    );

    // Form value changes
    this.scheduleSelectForm
      .get('scheduleSelect')
      .valueChanges.subscribe(value => {
        this.chosenSuiteName = value;

        this.suiteSchedule = this.schedules.filter(sched => {
          sched.LOCATION == value;
        });
      });
  }

////// HTML

<div class="card" *ngIf="schedules; else loading">
  <div class="card-header bg-light text-primary">
    <h3>All Schedules</h3>
  </div>
  <div class="card-body border border-light">
    <div class="row">
      <div class="col-sm">
        <form [formGroup]="scheduleSelectForm">
          <div class="form-row">
            <div class="form-group col-sm-4">
              <label>Select Schedule</label>
              <select class="custom-select form-control" formControlName="scheduleSelect">
                <option *ngFor="let s of suites" value="{{s}}">
                  {{ s }}
                </option>
              </select>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>



<div class="card mt-3" *ngIf="suiteSchedule">
  <div class="card-header bg-light text-primary">
    <h4>{{ chosenSuiteName }}</h4>
  </div>
  <div class="card-body border border-light">
    <div class="table-responsive">
      <table class="table table-sm table-striped">
        <thead>
          <th>Date</th>
          <th>Day</th>
          <th>Time</th>
          <th>Duration</th>
          <th>Project</th>
          <th>Episode</th>
          <th>Services</th>
          <th>Operator</th>
        </thead>
        <tbody>
          <tr *ngFor="let sched of suiteSchedule">
            <td>{{ sched.T_START * 1000 | date: 'MMM d'}}</td>
            <td>{{ sched.T_START * 1000 | date:'EEE' }}</td>
            <td>{{ sched.T_START * 1000 | date:'shortTime' }} - {{ sched.T_END * 1000 | date:'shortTime' }}</td>
            <td>{{ sched.WODURATION }}</td>
            <td>{{ sched.PROJECT }}</td>
            <td>{{ sched.PROD_EP }}</td>
            <td>{{ sched.SERVICES }}</td>
            <td>{{ sched.PERSONNEL }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>


<!-- Loading text -->
<ng-template #loading>
  Loading Schedules...
</ng-template>

Answer 1

您需要更改箭头函数，因为如果您使用大括号，它会返回一些内容，引用 here

this.suiteSchedule = this.schedules.filter(sched => {
    return (sched.LOCATION == this.chosenSuiteName);
});