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

Question

Это мой текущий код, но он не работает, может кто-то, пожалуйста, предоставьте мне правильный синтаксис. editMode является логическим значением и имеет значение false для init

<h3 *ngIf="!editMode ? 'Students': 'Student'"></h3>

В настоящее время он вообще ничего не показывает при загрузке страницы

Answer 1

Ваш тег h3 пуст. Вам нужно заполнить его.
Поскольку интерполяция Angular оценивает выражение javascript, вы можете использовать его для заполнения тега html нужным содержимым.

<h3>{{ !editMode ? 'Students': 'Student' }}</h3>

Answer 2

*ngIf принимает только условие и передает элемент dom, если он проходит.

Вы должны сделать что-то вроде:

<h3 *ngIf="editMode">Student</h3>
<h3 *ngIf="!editMode">Students</h3>

В качестве альтернативы вы можете использовать вид else условие с ng-шаблоном со ссылкой, что-то вроде:

<h3 *ngIf="editMode; else notEditMode">Student</h3>
<ng-template #notEditMode>Students</ng-template>

Вы также можете использовать интерполяцию строк, чтобы сделать что-то вроде:

<h3>{{ editMode ? "Student" : "Students" }}</h3>

Я бы также сказал, что это будет лучше удалить как можно больше логи c из шаблона и переместить их в класс компонентов, например:

// your.component.html
<h3>{{ editModeLabel }}</h3>

// your.component.ts
public get editModeLabel() {
  return this.editMode ? "Student" : "Students"
}