Angular (Тип скрипта) – Как добавить условие If внутри массива
Я показываю кнопки на экране, выбирая кнопки для отображения, вызывая метод, который выглядит, как показано ниже.
getButtons: IGetButtonsList = {
"Buttons": [
{
"DisplayName": "Create User",
"Target": "./createuser"
},
{
"DisplayName": "Load Products",
"Target": "./getproducts/all"
}
]
};
Я хочу добавить условие внутри массива, если this.role === 'WL_H3G'. Я хочу перестать возвращать элемент кнопки «Создать пользователя» из массива. У меня есть доступ к свойству this.role в файле ts компонента.
Я попытался добавить проверку условия, если this.role === 'WL_H3G внутри массива, но она выдает ошибки компиляции.
Массивы предназначены для хранения данных, а не логики. Вам нужно будет добавить проверку для определенного role либо в шаблоне HTML, либо в другом месте вашего TypeScript с помощью метода, который возвращает только те элементы массива, которые вы хотите.
Ответы 2
Вам необходимо переопределить реквизиты, чтобы они принимали неопределенный тип (обратите внимание, что не забудьте проверить условие в HTML, чтобы не вызвать ошибку при рендеринге.
Поскольку this.role извлекается из API, будьте осторожны, чтобы getButtons make не возвращал нужное значение, поскольку getButtons определяется до того, как this.role имеет значение.
getButtons: IGetButtonsList = {
"Buttons": [
this.role === 'WL_H3G'?undefined:{
"DisplayName": "Create User",
"Target": "./createuser"
},
{
"DisplayName": "Load Products",
"Target": "./getproducts/all"
}
]
};
Вы можете использовать синтаксис расширения для исключения элементов в массиве на основе условия:
const optionalButtons = [{
"DisplayName": "Create User",
"Target": "./createuser"
}]
getButtons: IGetButtonsList = {
"Buttons": [
...(this.role == "WL_H3G" ? [] : optionalButtons),
{
"DisplayName": "Load Products",
"Target": "./getproducts/all"
}
]
};
Здесь оператор spread (...) распаковывает элементы массива, который вычисляется с использованием условия this.role == "WL_H3G".
Это означает, что если условие возвращает true, элементы в массив добавляться не будут, в противном случае будут добавлены элементы optionalButtons.
«путем вызова метода, который выглядит так, как показано ниже…» Это явно не метод.