Задача <mat-chip> по угловому дизайну материала - PullRequest
0 голосов
/ 30 августа 2018

Моя проблема: у меня есть список мат-чипов, и если я закрываю первый элемент, все в порядке, и если я закрываю последний элемент, все закрываются:

enter image description here

это мой HTML:

<mat-form-field>
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let keyword of keywords" [removable]="removable" (removed)="remove(keyword)">
      {{ keyword }}
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
    <input placeholder="{{ 'consultantSearchPage.searchForConsultantOrSkills' | translate }}" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      (matChipInputTokenEnd)="addSearch($event)">
  </mat-chip-list>
</mat-form-field>

а это мой тс:

remove(keyword): void {
  const index = this.keywords.indexOf(keyword);
  if (index >= 0) {
    this._store.dispatch({ type: UPDATE_KEYWORDS, payload: index});
  }
}

и если я использую:

remove(keyword): void {
  const index = this.keywords.indexOf(keyword);
  if (index >= 0) {
    this.keywords.splice(index, 1);
  }
}

все в порядке, но мои данные не обновляются

и это мой код редуктора:

export const UPDATE_KEYWORDS = 'UPDATE_KEYWORDS';
.......
case UPDATE_KEYWORDS:
  console.log( state.keywords.splice(0, 1));
  return Object.assign({}, state, { keywords: state.keywords.splice(action.payload, 1) });

1 Ответ

0 голосов
/ 30 августа 2018

Из вашего комментария вы делаете это:

case UPDATE_KEYWORDS:
  console.log( state.keywords.splice(0, 1));
  return Object.assign({}, state, { keywords: state.keywords.splice(action.payload, 1) });

тогда как вы должны сделать это:

case UPDATE_KEYWORDS:
  state.keywords.splice(action.payload, 1);
  console.log(state.keywords);
  return Object.assign({}, state, { keywords: state.keywords });

Вы хотите использовать массив, который был объединен, а не массив, возвращенный из соединения.

https://www.w3schools.com/jsref/jsref_splice.asp

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...