如何在angular employees component.html上返回employeecode？ [英] How to return employeecode on angular employees component.html?

问题描述

问题



如何在angular employees component.html上返回EmployeeCode？

 示例 数据 < span class =code-leadattribute> ReferenceTable  
 
 代码  tableName   FieldName   LabelText  
  111  员工  EmployeeId   EmployeeCode  
 结果   调用 
 
 GetLabelTextForEmployee（'Employees'，'EmployeeId'）

它假设返回EmployeeCode



我使用角度为6的asp.net core 2.1 web API。



我在Web API名称GetReferenceFileData上创建函数以获取来自<的标签文本br $>


数据库并根据参考表在employees.component.html上查看。



这是我的功能：

 [HttpGet（  {tableName} / {FieldName}）] 
 [生成（  text / plain）] 
  public   string  GetReferenceFileData（[FromRoute] < span class =code-keyword> string  tableName，[FromRoute]  string  FieldName）
 {
  var 结果=（来自 h   _context.ReferenceFiles 
 其中 h.TableName == tableName&& h.FieldName == FieldName 
  select  h.LabelText）.FirstOrDefault（）; 
  if （结果==  null ）
 {
结果=  不存在; 
} 
 
  return （结果）; 
 
 
} 

上面的函数只返回标签的一个字符串值作为标量值



on employee.component.html

//如何在此处使用函数GetLabelTextForEmployee返回EmployeeCode



我的尝试：



1- on角上的API服务我创建函数下面：

 public GetLabelTextForEmployee（tableName：string，FieldName：string）：Observable< any> {
返回this.http 
 .get（'https：// localhost：44326 / api / reference /'+ tableName +'/'+ FieldName，{
 responseType：'text'， 
}）; 
} 

解决方案

在employees.component.ts文件中导入OnInit和OnDestoy并实现它们。

在你的课上，你需要一个employeeCode string-property来存储这个值。

在ngOnInit你需要订阅带有所需参数的ApiService的GetLabelText，你需要在ngOnDestroy中订阅需要取消订阅。

  import  {OnInit，OnDestroy}来自< span class =code-string>'  @ angular / core'; 
  import  {Subscription}来自'  rxjs' ; 
 
  import  {ApiService}来自'  ../../服务/ api.service'; 
 
 @component（{
 selector：'  [app-employees]' 
 templateUrl：'  ./ employees.component.html'，
}）
  export   class  EmployeesComponent  implements  OnInit，OnDestroy {
 
  public  labelSubscription：Subscription; 
  public  employeeCode：string; 
 
  public   constructor （ private  apiService：ApiService）{} 
 
  public  ngOnInit（）{
  this  .labelSubscription = 
 ApiService.GetLabelText（'  Employee'，< span class =code-string>'  EmployeeId'）
 .subscribe（（value）=>  this  .employeeCode = value）; 
} 
 
  public  ngOnDestroy（）{
  if （ this  .labelSubscription）{
  this  .labelSubscription.unsubscribe（）; 
  this  .labelSubscription =  null ; 
} 
} 
} 

我还建议你看看角色文档并在英雄教程上运行。

Problem

How to return EmployeeCode on angular employees component.html ?

Sample data ReferenceTable

Code  tableName   FieldName   LabelText
111   Employees   EmployeeId  EmployeeCode
Result of calling

GetLabelTextForEmployee('Employees','EmployeeId')

it suppose Return EmployeeCode

I work on asp.net core 2.1 web API with angular 6.

I make function on web API name GetReferenceFileData to get text of label from

database and show on view on employees.component.html based on Reference Table .

This is my function :

[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);


        }

Function above return only one string value for label as Scalar Value

on employee.component.html
// how to use function GetLabelTextForEmployee here to return EmployeeCode

What I have tried:

1- on API service on angular I create Function Below :

public GetLabelTextForEmployee(tableName:string,FieldName:string): Observable<any> {
        return this.http
            .get('https://localhost:44326/api/reference/' + tableName + '/' + FieldName, {
                responseType: 'text',
            });
    }

解决方案

In your employees.component.ts file you import OnInit and OnDestoy and implement them.
On your class, you'll need a employeeCode string-property to store the value.
In ngOnInit you need to subscribe to the ApiService's GetLabelText with the needed parameters and in ngOnDestroy you'll need to unsubscribe.

import { OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { ApiService } from '../../services/api.service';

@component({
  selector: '[app-employees]'
  templateUrl: './employees.component.html',
})
export class EmployeesComponent implements OnInit, OnDestroy {

  public labelSubscription: Subscription;
  public employeeCode: string;

  public constructor(private apiService: ApiService) { }

  public ngOnInit() {
    this.labelSubscription =
      ApiService.GetLabelText('Employee', 'EmployeeId')
                .subscribe((value) => this.employeeCode = value);
  }

  public ngOnDestroy() {
    if (this.labelSubscription) {
      this.labelSubscription.unsubscribe();
      this.labelSubscription = null;
    }
  }
}

I also suggest you take a look at Angular documentation and do a run on the Heroes tutorial.

这篇关于如何在angular employees component.html上返回employeecode？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！