Угловое условие if от html к компоненту?
У меня эта проблема очень нова в Angular: я хочу создать несколько фильтров в таблице. Итак, чтобы добиться этого, я хочу создать условие «если» для ввода, например, если у меня есть заголовок таблицы с именем «Сущность», тогда он сообщит моему классу компонентов, что это входная Сущность.
как мне этого добиться?
public performFilter(filterBy: string): IDonnee[] {
filterBy = filterBy.toLocaleLowerCase();
// I'd want to put the condition here like (if input.class == "entity then.."
if (this.isFiltered) {
return this.filteredDonnees.filter((donnee: IDonnee) =>
donnee.entity.toLocaleLowerCase().indexOf(filterBy) !== -1);
} else {
return this.donnees.filter((donnee: IDonnee) =>
donnee.entity.toLocaleLowerCase().indexOf(filterBy) !== -1);
}
}<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table *ngIf = "donnees && donnees.length">
<th>
Entity
<br>
<input size = {{thSize}} ng-model = "entity" class = "entity"[(ngModel)] = "listFilter">
</th>
<th>
bdrID
<br>
<input size = {{thSize}} ng-model = "bdrId" class = "bdrId" [(ngModel)] = "listFilter2">
</th>
</table>Например, я хотел бы получить имя класса ввода в моем коде JS.
Извините, если я не ясно выразился, вы можете задать любой вопрос и заранее спасибо!
Ответы 1
Итак, если я правильно понимаю, ваша цель - фильтровать при нажатии на соответствующий элемент TH? Например, вызвать событие щелчка на элементе ввода?
Если это так, вы можете попробовать что-то вроде этого: Укажите идентификатор входным элементам: input id = "donnees" (click) = "performFilter ($ event)" Аналогично для обоих элементов TH. По какой-то странной причине он не позволяет мне вставить полный код таблицы.
Вместо того, чтобы иметь несколько массивов, я думаю, что лучше иметь один объект со всеми массивами, чтобы вы могли фильтровать на основе идентификатора, переданного из $ event. Например: filterObject => donnees [], filterDonnees []
public performFilter(event) {
return this.filterObject[event.target.Id].filter(// write your condition here);
}
Сообщите мне, если это то, что вы искали.
в примере ur, как мне получить доступ к идентификатору ввода без события?
Событие будет (keyup) = 'performFilter ($ event)', а не щелчком.
Хорошо, я попробую это, я пытаюсь понять логику этого. Для чего нужен filterObject? Я имею в виду, что такое filterObject [event.target.id], означает ли это, что это массив, например, сущностей, если id = entity?
Вместо того, чтобы иметь несколько элементов, лучше, если у вас есть один объект, чтобы вы могли фильтровать, передав идентификатор. Это просто для лучшей читаемости и управления кодом. Допустим, если в будущем у вас будет еще один массив, вам придется добавить еще одно условие «Если» для этого массива. Но если вы последуете этому методу, ваш объект performFilter всегда останется прежним. Если вы не хотите этого делать, вы все равно можете использовать метод, который у вас есть, где вы можете использовать идентификатор в условии if и делать то же самое, что и вы. filterObject [event.target.id] => если идентификатор задан, он будет фильтровать объекты
При удаче? @Mich
Я пытаюсь реализовать ваше решение, но не могу этого сделать. С моим решением, как я могу получить «идентификатор» ввода? так как это не с событием, я не могу использовать event.target.Id, я также пробовал let searchId = element (by.model ('entity')); но это не работает = / это кажется таким простым, но я не могу этого сделать.
спасибо за вашу помощь, я попробую еще раз завтра, хорошего дня! :)
Позвольте нам продолжить обсуждение в чате.
Попробуйте этот образец stackblitz.com/edit/…
Здравствуйте, в этом примере у меня есть 2 столбца, затем, когда я что-то напишу во вводе (который находится чуть ниже) первого столбца, он отфильтрует это, затем, когда я что-то напишу во втором вводе, он отфильтрует то, что слева от данных после фильтрации с первым входом. (извините, если это трудно понять!) Я попробую ваш метод и вернусь через секунду (корректируя его для моего кода), спасибо! Так что я действительно не использовал событие, просто добавил фильтр прямо на компонент при каждом нажатии клавиши и изменении строки фильтра.