Как вернуть EmployeeCode для угловых сотрудников component.html?

Question

Проблема

Как вернуть EmployeeCode для угловых сотрудников component.html?

Пример данных ReferenceTable

Code  tableName   FieldName   LabelText
111   Employees   EmployeeId  EmployeeCode

Результат вызова

GetLabelTextForEmployee('Employees','EmployeeId')

it suppose Return EmployeeCode

Я работаю над веб-API asp.net core 2.1 с угловым 6.

Я создаю функцию для имени веб-API GetReferenceFileData, чтобы получить текст метки из базы данных

и показатьна сайте employee.component.html на основе справочной таблицы.

Это моя функция:

[HttpGet("{tableName}/{FieldName}")]
        [Produces("text/plain")]
        public string GetReferenceFileData([FromRoute] string tableName, [FromRoute] string FieldName)
        {
          var Result =  (from h in _context.ReferenceFiles
                          where h.TableName == tableName && h.FieldName == FieldName
                          select h.LabelText).FirstOrDefault();
            if(Result==null)
            {
                Result = "Not Exist";
            }

            return (Result);


        }

Функция выше возвращает только одно строковое значение для метки в качестве скалярного значения

То, что я пробовал:

1- в API-сервисе, который я создаю, функция ниже:

GetLabelTextForEmployee(tableName:string,FieldName : string)
              {
                return this.http.get('https://localhost:44326/api/reference/' + tableName + '/' + FieldName);
              }


on employee.component.html 

// как использовать функцию GetLabelTextForEmployee здесь, чтобы вернуть EmployeeCode, который я создаю в соответствии с существующим в посте кодом:

on employees.component.ts

    getEmployeeCode() {
       this.api.GetLabelTextForEmployee('Employees','EmployeeId')
       .subscribe( data=>{
         this.returnedData = data; //SUBSCRIBE HERE
         console.log(data);
       }); 
    }
on employees.component.html
 {{getEmployeeCode() | async}}

Результат, как показано ниже. Я получаю EmployeeCode, но в бесконечном цикле и не отображается в форме при отображении изображения Результат кода после бесконечного цикла

Answer 1

Полагаю, вы имеете в виду, что когда вы звоните GetLabelTextForEmployee(), вы не получаете результат (или, скорее, вы не получаете ожидаемый результат)?

Когда вы используете Angular's HttpClient дляHTTP-запросы, вы должны подписаться на метод, в противном случае он фактически никогда не выполняется.

В вашем employee.component.ts вам нужно будет вызвать функцию, подписаться на нее и назначитьрезультат к локальной переменной.Затем вы можете использовать эту локальную переменную в своем шаблоне (employee.component.html);

В следующем предполагается, что вы хотите вызвать функцию при инициализации компонента, и ваша функция находится в вызове службы ApiService, и что вашAPI возвращает объект.

employee.component.ts

employee: any;

constructor(private apiService: ApiService) { }

ngOnInit() { 
    this.apiService.GetLabelTextForEmployee().subscribe(result => {
          this.employee = result;
    }
}

employee.component.html

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

например,

<span class="employee-code">{{employee.employeeCode}}</span>

Опять же, это при условии, что ваш API возвращает объект, к которому вы обращаетесьшаблон с {{employee.employeeCode}}.

Если ваш API возвращает строку, то вы просто интерполируете {{employee}}

РЕДАКТИРОВАТЬ

Если вы хотите вызвать функцию непосредственно изВ этом шаблоне вы все еще используете интерполяцию, но, поскольку ваша функция находится в службе, вам необходимо иметь функцию в своем компоненте, которая вызывает службу.Не рекомендуется вызывать сервисную функцию непосредственно из шаблона.

т.е.

employee.component.ts

getEmployeeCode() {
    return this.apiService.GetLabelTextForEmployee('Employees','EmployeeId');
}

employee.component.html

Теперь вы можете позвонить по номеру getEmployeeCode() и использовать async трубку.

{{getEmployeeCode() | async}}

ПРИМЕЧАНИЕ: Вам НЕ нужно подписываться на GetLabelTextForEmployee() в методе вашего компонента (getEmployeeCode()) при использовании канала async.Angular уже подпишется на него и вернет последнее выданное значение, прежде чем пометить для обнаружения изменений.

Асинхронный канал подписывается на Observable или Promise и возвращает последнее выданное им значение.Когда выдается новое значение, асинхронный канал помечает компонент, который необходимо проверить на наличие изменений.Когда компонент уничтожается, асинхронный канал автоматически отписывается, чтобы избежать возможных утечек памяти.