Проверить в шаблоне, является ли переменная массивом, строкой, числом
У меня есть массив элементов, как показано ниже, внутри родительского файла component.ts
items = [
{text: 'Length' , value: 10 },
{text : 'Degree' , value : "108"},
{text : 'Edges' , value : [10,20,30]}
]
Затем у меня есть компонент с именем app-label-values, расположенный внутри цикла * ngFor в родительском компоненте, как показано ниже.
<div *ngFor = "let item of items">
<app-label-values
label = "item.text"
value = "item.value">
</app-label-values>
</div>
Назначение компонента app-label-values - отображать метку и значение, соответствующее метке.
Например, Возраст: 10 лет
Метка здесь всегда будет текстовой, а тип значения может быть динамическим (число, строки, массивы).
Поэтому, когда значение имеет тип array, мне нужно показать только длину массива, как в нашем случае компонент должен отображать «Edges: 3», поскольку [10,20,30] .length равно 3.
Моя цель - не использовать эту логику проверки типов в компоненте app-label-values, поскольку мне нужно, чтобы он был тупым и отображал только то, что ему передано.
Как я могу решить эту проблему из самого родительского компонента во время рендеринга.
Пожалуйста, помогите заранее.
@GeorgeBailey Это не будет работать для значений числового типа, value.length будет вызывать и ошибку, и даже если я конвертирую число в строку и применяю к ней длину, это даст мне нежелательный результат. например. '10'. Длина = 2
Хорошо. Я действительно не пробовал, но вы можете проверить с value = "item.value.constructor == Array ? item.value.length : item.value"
Спасибо, Джордж, проверка конструктора мне показалась более понятной. Спасибо :)
value = "item.value.push? item.value.length: item.value". Я сделал это, и он также работает в шаблоне, поскольку метод push принадлежит только прототипу массива. Однако я надеюсь, что получу лучшее решение, чем это.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать ngIf, чтобы проверить, есть ли у item.value свойство длины.
В родительском компоненте вы все равно можете перейти к дочернему item.value, а в дочернем компоненте вы отображаете значение в зависимости от того, что это массив или число.
- проверить свойство длины
<div *ngIf = "item.value?.length > {{item.value.length}} </div>
Если вы хотите напрямую передать длину массива вашему дочернему компоненту, вы можете рассмотреть возможность использования тернарного оператора
value = "item.value?.length ? item.value.length : item.value"
Если вы хотите проверить строковое значение, сначала проверьте, есть ли свойство длины. Затем можно использовать оператор + для анализа строки. А с помощью второго тернарного оператора вы можете проверить, является ли это числом или массивом.
value = "item.value?.length ? +item.value ? item.value : item.value.length : item.value"
- проверить имя конструктора
value = "item.value.constructor.name === "Array" ? item.value.length : item.value"
Используя конструктор, можно также проверить, является ли значение строкой, числом и т. д. живой код
Это может привести к сбою при обнаружении строкового значения, поскольку и массив, и строка имеют свойство length. например. [10,20,30] .length = 3; '10'. Длина = 2
В своем вопросе вы сказали, что это число или массив. Если это строка, вы можете преобразовать ее в число перед
edkeveked - Как упоминал @George, проверка с помощью конструктора кажется более чистой, поскольку нам не нужно беспокоиться о синтаксическом анализе строки и числа. Отображать длину только тогда, когда конструктор представляет собой массив, иначе отображается как есть. Пожалуйста, исправьте меня, знаю, если я ошибаюсь .
value = "item.value.push? item.value.length: item.value". Я сделал это, и он также работает в шаблоне, поскольку метод push принадлежит только прототипу массива. Однако я надеюсь, что получу лучшее решение, чем это.
Я отредактировал ответ. Я добавил, как проверять напрямую с помощью конструктора
value = "item.value.constructor.name == = " Массив "? item.value.length: item.value" работает. Спасибо
Вы можете использовать оператор if Else в шаблоне с angular 4 и на wards ...
<div *ngFor = "let item of items">
<app-label-values *ngIf = "item.value.length >= 0; else elseIfTemp" label = "item.text" value = "item.value.length"> </app-label-values>
<app-label-values label = "item.text" value = "item.value" #elseIfTemp>
</app-label-values>
</div>
Вы можете написать метод, который будет проверять тип и соответственно возвращать
вот пример
<div *ngFor = "let item of items">
<app-label-values
label = "item.text"
value = "checkType(item.value)">
</app-label-values>
</div>
и в файле .ts
checkType(value){
if (typeof value === 'object'){
return value.length;
}else{
return value;
}
}
вот - пример
спасибо Aniket.Однако вызов метода в шаблоне не является плохой практикой, поскольку метод вызывается слишком много раз.? Пожалуйста, поправьте меня, если я ошибаюсь.
Да, но если вы проверите длину внутри html, тогда она также выдаст длину строкового значения. вот почему я использую метод. и вы правы, этот метод будет вызывать несколько раз в зависимости от длины массива.
Как упоминал @George, проверка с помощью конструктора кажется более чистой, поскольку нам не нужно беспокоиться о строке и числе. Отображать длину только тогда, когда конструктором является Array else display как есть.
да, я пробовал, и это не сработало. Итак, я нашел исправление как value = "item.value.push? item.value.length: item.value". Я сделал это, и оно также работает в шаблоне, как метод push относится только к прототипу массива, но я надеюсь, что получу лучшее решение, чем это.
value = "item.value.length"??