Проблема сборки продукта при проверке длины переменной типа объединения, имеющей тип массива в шаблоне angular html

Я столкнулся с проблемой при проверке длины массива, строки и числа типа объединения. Пример кода ошибки при сборке проекта angular в режиме prod:

Переменная в ts

public developerData: {
    [key: string]: {
        type: 'default';
        data: string | number;
    } | {
        type: 'array',
        data: Array < string | number | boolean >
    }
} = {
    'test': {
        'type': 'array',
        'data': ['1', '2', '3']
    }
};

Шаблон HTML

<div *ngIf="developerData['test']['type']=='array' && developerData['test']['data'].length >= 0">
   Welcome
</div>

Ошибка сборки продукта

Свойство "длина" не существует для типа "строка" | номер | (строка | число | логическое значение) [] '. Свойство «длина» не существует для типа «число».

Версии программного обеспечения

  • Угловой: 7.3.5

  • TypeScript: 3.1.6

  • Узел: 10.16.3

  • NPM: 6.9.0


typescript angular html union-types
person Nelson Gnanaraj    schedule 24.03.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

При доступе к переменной она может быть либо «строкой» (или) «числом» (или) «логическим» одновременно с тем, что вы указали с помощью «|» в машинописном тексте.

Поэтому перед доступом к свойству length переменной добавьте проверку типа с помощью метода typeof в JS.

Вы можете использовать функцию проверки в файле 'tsx', которая проверяет тип и возвращает правильный результат проверки и вызывает его в 'ngif'

person Viswa    schedule 25.03.2021
comment
Возможна проверка без проверки машинописного текста. Я должен проверить это в HTML-теге. - person Nelson Gnanaraj; 25.03.2021
comment
Вы можете писать вложенные условные операторы внутри ngif, если хотите, но это затруднит отладку. Но вы можете вызвать функцию валидатора в ngIf, например ‹div * ngIf = isValidData ()› Добро пожаловать ‹/div› - person Viswa; 25.03.2021
comment
Не могли бы вы поделиться некоторыми возможными фрагментами кода - person Nelson Gnanaraj; 25.03.2021
comment
stackoverflow.com/questions/51674156/ - Обратитесь к этому вопросу для разных реализаций - person Viswa; 25.03.2021
comment
Мне нужна проверка без вызова методов ts. При прокрутке страницы метод вызывается много раз. это может привести к зависанию страницы. - person Nelson Gnanaraj; 25.03.2021
comment
Глобальные элементы, такие как Window, typeof, недоступны в шаблоне, поскольку Angular анализирует только шаблоны Angular, а не шаблоны JS. Вам нужно использовать это в Component Typescript. Но если вы хотите оптимизировать, вы можете использовать мемоизацию. - person Viswa; 25.03.2021