Первый вопрос о StackOverflow, как интересно!
В настоящее время у меня есть два пользовательских компонента, оба принимают пару входных переменных:
<sod-matrix-table #matrix
[entities] = "entities"
[pairs] = "pairs"
[displayedColumns] = "displayedColumns">
</sod-matrix-table>
и :
<data-table
#table
[type] = "sodMatrixQuery.targetType"
[query] = "sodMatrixQuery" >
</data-table>
При обновлении entities
, pairs
или columns
первого тега все обновляется правильно. Например, когда я обновляю массив displayedColumns
в компоненте, который использует тег таблицы матриц, таблица внутри этого компонента обновляется с использованием нужных столбцов.
Однако, когда я обновляю sodMatrixQuery
в компоненте и нажимаю кнопку поиска, объект query
в data-table
обновляется некорректно, хотя они связаны вместе.
Пример:
data-table
имеет поле query
и использует этот запрос для отправки запросов REST на сервер. SODMatrixComponent
имеет поле sodMatrixQuery
и использует тег data-table
, привязывая свое поле к другому полю.
Матрица SOD содержит пары объектов. Когда я выбираю 2 пары и нажимаю кнопку поиска, data-table
отправляет запрос REST с 2 парами. Однако, когда я удаляю две пары и снова нажимаю поиск, компонент data-table
отправляет еще один запрос REST, снова с двумя парами вместо ни одной. При повторном нажатии кнопки поиска отправляется правильный запрос.
Я отлаживал, и внутри все с парами идет нормально, только привязка данных не обновляется вовремя. Есть мысли по этому поводу?
Обновлено: это код, который происходит при нажатии кнопки:
public search() {
const tempQuery = new SODMatrixQuery(this.lhsType, this.rhsType, [], this.entities);
// Only look at elements above the diagonal
for (let i = 1; i < this.pairs.length; i++) {
for (let j = 0; j < i; j++ ) {
const p = this.pairs[i][j];
if (p.checked) {
tempQuery.addToxicPair(p);
}
}
}
if (this.dataTable) {
this.sodMatrixQuery = tempQuery;
// this.dataTable.query = tempQuery;
this.dataTable.loadDataPage();
}
}
Переменные SODMatrixComponent:
@ViewChild("table")
public dataTable: ElimityDataTableComponent;
public sodMatrixQuery: SODMatrixQuery;
Датируемый компонент:
@Input()
public query: Query;
SODMatrixQuery расширяет Query!
Прокомментированная строка ниже - это исправление, позволяющее напрямую обновить объект запроса, но мне просто любопытно, почему привязка данных не работает.
Как вы обновляете sodMatrixQuery
?
@AgashThamo. Я действительно не установил конкретную стратегию, так что я думаю, что это по умолчанию? Мне просто странно, что он работает с одним тегом, а не с другим
@rinukkusu Теперь я обновляю свой пост, добавляя больше кода!
Должно быть по умолчанию, если вы ничего не расширяете. Если один из @Input
является объектом или массивом, Angular не обнаружит изменений, если вы измените значения в объекте или массиве, поскольку он будет сравнивать ссылки, которые останутся прежними. Обновлено: возможно ли создать базовый стек и воссоздать свою проблему?
@AgashThamo. В настоящее время на работе отредактировал свой пост, добавив еще немного кода, и это все, что я могу сделать на данный момент.
Похоже, что обнаружению изменений понадобится время, чтобы передохнуть - привязка данных не может быть обновлена между настройкой члена sodMatrixQuery
и вызовом this.dataTable.loadDataPage()
- поэтому оно все еще имеет старое значение при первом вызове. После этого будет запущено обнаружение изменений, и при втором вызове оно будет иметь правильные значения.
Хорошо, конечно, не беспокойся. Вы слушаете ngOnChanges
и обновляете данные?
@AgashThamo. В <sod-matrix-table> я его не использую, и значения обновляются нормально. Поэтому я предположил, что это не нужно в компоненте sod-matrix-component
Это зависит от того, как отображаются ваши компоненты, не видя вашего полного кода, я не могу придумать другого предложения. См. Ответ @rinukkusu, я в основном делаю обновления в пользовательских компонентах, например.
Похоже, что обнаружению изменений понадобится время, чтобы передохнуть - привязка данных не может быть обновлена между настройкой члена sodMatrixQuery
и вызовом this.dataTable.loadDataPage()
- поэтому оно все еще имеет старое значение при первом вызове. После этого будет запущено обнаружение изменений, и при втором вызове оно будет иметь правильные значения.
if (this.dataTable) {
this.sodMatrixQuery = tempQuery;
// can't update the bindings here
this.dataTable.loadDataPage();
}
Итак, глядя на вашу текущую архитектуру, было бы лучше переместить вызов loadDataPage()
к компоненту dataTable в ловушку жизненного цикла OnChanges
, как сказал Агаш в комментариях.
export class ElimityDataTableComponent implements OnChanges {
// ...
ngOnChanges(changes: SimpleChanges) {
if (changes.query) {
this.loadDataPage();
}
}
Таким образом, каждый раз, когда вы обновляете sodMatrixQuery
, он автоматически загружает новые данные.
Какова стратегия обнаружения изменений в ваших компонентах? Вы уже проверяли это: netbasal.com/…?