Как показать различное текстовое содержимое для динамического ngClass в Angular17 – ⇐ CSS

[Anonymous]

Я публикую свой вопрос здесь, хотя сомневаюсь, что это вообще достижимо. Сценарий моего случая немного типичен. Поэтому, пожалуйста, будьте терпеливы, если что-то из этого покажется многословным/странным.
Я сохраняю описание вакансии через приложение nG17 и .NetCore 8. Модель Job имеет тип перечисления в качестве одного из своих свойств. Поэтому, естественно, при ef-миграции соответствующий столбец таблицы имеет целочисленный тип. Сохранение нового задания работает нормально. Теперь после получения данных из БД API дает мне целочисленные значения для поля «тип». Я хочу, чтобы в столбце сведений о моем задании отображалось соответствующее текстовое имя типа задания вместо целочисленного значения. Кроме того, для типов заданий будут применяться разные классы CSS [с разными цветовыми кодами]. Позвольте мне опубликовать некоторые соответствующие блоки кода, чтобы проиллюстрировать то, что я сделал. Вам будет легче понять.
Job.cs -

Код: Выделить всё

public class Job
{
public int Id { get; set; }
public string Title { get; set; } = string.Empty;
public string Description { get; set; } = string.Empty;
public string Location { get; set; } = string.Empty;
public Type? Type { get; set; }
public string CompanyName { get; set; }
}

Тип перечисления –

Код: Выделить всё

public enum Type
{
Permanent,
Temporary,
Internship,
Contract
}

Конечная точка WebAPI JobDetails –

Код: Выделить всё

[HttpGet("{id}")]
[Authorize(Roles ="Employer, Employee")]
public async Task GetSelectedJobDetails(int id)
{
if(id>0)
{
var selectedJobDetails = await _dbContext.Jobs.Where(j => j.Id == id)
.Select(g => new Job
{
Id = g.Id,
Title=g.Title,
Description=g.Description,
CompanyName=g.CompanyName,
Type= (Hirect.API.Models.Type?)(g.Type),
LastDate=g.LastDate,
Location=g.Location,
}).FirstAsync();

if(selectedJobDetails!=null)
{
return Ok(selectedJobDetails);
}
else
{
return NotFound(new
{
Message = "Cannot find details corresponding to the selected job!"
});
}
}
else
{
return BadRequest(new
{
Message= "Cannot find details corresponding to the selected job!"
});
}
}

Внутри моего компонента Angular, где я привязываю полученные значения к элементам управления HTML,

Код: Выделить всё

Type:

'temporary_type':selectedJobDetails.type=='1',
'internship_type':selectedJobDetails.type=='2',
'contract_type':selectedJobDetails.type=='3'
}">
{{selectedJobDetails.type}}

Наконец CSS-файл для этого компонента —

Код: Выделить всё

.permanent_type
{
color:white;
background-color: darkblue;
content: 'Permanent';
border-radius: 7px;
}

.temporary_type
{
color:white;
background-color: lightcoral;
content: 'Temporary';
border-radius: 7px;
}

.internship_type
{
color:blue;
background-color: goldenrod;
content: 'Internship';
border-radius: 7px;
}

.contract_type
{
background-color: green;
color: white;
content: 'Contract';
border-radius: 7px;
}

Как видите, я создал 4 разных класса CSS для 4 типов заданий и использовал ngClass для динамического применения классов на основе значения selectedJobDetails.type. Я попытался добавить «контент» в каждый из классов, чтобы применять разные тексты. Классы CSS применяются абсолютно правильно. Я получаю элементы div разного цвета для соответствующих типов заданий. Но значения по-прежнему отображаются как 0,1,2,3. Вместо этого мне нужен постоянный для 0, временный для 1, стажировка для 2 и контракт для 3, как показывает тип перечисления.
Итак, нужна помощь. Как я могу это сделать? Возможно ли это? Какой подход мне следует принять? Где код/логика нуждается в изменении/дополнении, чтобы помочь мне достичь моей цели? Что мне делать? Как видите, размещение «контента» внутри классов CSS вручную не дало результата.
Пожалуйста, предложите несколько аккуратных и эффективных настроек!
С нетерпением жду, п>

Подробнее здесь: https://stackoverflow.com/questions/792 ... -angular17