Блог

Главная - Вопросы по программированию - Переменная компонента, не отображаемая на странице (Angular6)

Переменная компонента, не отображаемая на странице (Angular6)

#html #typescript #angular6

#HTML #typescript #angular6

Вопрос:

Итак, дело в том, что html-шаблон компонента angular, похоже, не знает о переменной, которую я установил. В принципе, даже если я задаю переменную в классе .ts, а затем пытаюсь отобразить ее в компоненте, представление ведет себя так, как если бы переменной не было.

Я также пытался создать переменную внутри тега, но это просто не сработало

TS
ts-часть компонента

 export class <%component_name%> {
  bar = "test";
  constructor(){...}
}

HTML
html-часть компонента

 <div>
    <div>{{bar}}</div>
</div>

Результатом является:

На всякий случай: если я ввожу текст внутри div, не пытаясь отобразить переменную, это работает

HTML
Результат

О, на всякий случай: регистрация переменной hello в функции конструктора действительно отображает ее в консоли: нажмите

кроме того, если я добавлю *ngIf, ссылающийся на какое-либо логическое значение из файла TS, подобное этому:

TS 

 export class <%component_name%> {
  foo = true;
  bar = "test";
  constructor(){...}
}

HTML 

 <div *ngIf="foo">
    <button>{{bar}}</button>
</div>

..тогда вообще ничего не отображается.

В конце предполагается, что это кнопка со значком и текстом на ней, но я получаю только значок на кнопке (на который есть ссылка внутри файла .html)

Если у вас есть какие-либо идеи о том, что может происходить, пожалуйста, сообщите

Комментарии:

1. Ваши обозначения уже неверны. Вы не можете объявить переменную класса с помощью var . Вы уверены, что это реальный код, который вы используете?

2. Это не так, я в значительной степени переписал это, потому что проблема появляется только в одном компоненте во всем проекте, и мне действительно не разрешено копировать фрагменты кода оттуда. Хотя вы правы, ключевого слова «var» нет, но в остальном все то же самое

3. Из того, что вы опубликовали здесь, кажется, что все в порядке. Можете ли вы предоставить воспроизводимый полный пример?

4. Ну вот, я отредактировал вопрос, так что теперь в нем есть пара фрагментов из фактического кода, но на самом деле я не уверен, поможет ли это