Question

我有一个非常简单的组件。我调用一个API，该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);
});

角度值更改-设置属性，然后更新ngFor-不起作用

1 个答案: