Mobile versionEs gibt zwei Modelle. Angestellter und Gehalt. Jeder hat einen Controller. Nämlich Mitarbeitercontroller und SALTERSCONTROLLER. Es gibt eine Serviceklasse, die auf die Controller zugreift. Wenn der Benutzer auf der ersten Seite auf eine Schaltfläche klickt, lädt die Mitarbeiterseite. Dies funktioniert richtig. Der Benutzer kann auf einen Link neben jedem Mitarbeiter klicken, um sein Gehalt anzuzeigen. Der Code für die Gehaltsseite ist identisch mit der der Mitarbeiterseite. Wenn ich jedoch auf den Link klicke, lädt die Seite ohne Daten. Wenn ich die Aktionsmethode auf dem Controller debugienamespace EmployeesAngular.Server.Controllers
{
[Route("[controller]")]
[ApiController]
public class EmployeesController : ControllerBase
{
private readonly EmployeesAngularServerContext _context;
public EmployeesController(EmployeesAngularServerContext context)
{
_context = context;
}
[HttpGet]
public async Task GetEmployee()
{
return await _context.Employee.ToListAsync();
}
}
}
< /code>
Dies ist der Gehälter Controller < /p>
namespace EmployeesAngular.Server.Controllers
{
[Route("[controller]")]
[ApiController]
public class SalariesController : ControllerBase
{
private readonly EmployeesAngularServerContext _context;
public SalariesController(EmployeesAngularServerContext context)
{
_context = context;
}
[HttpGet]
public async Task GetSalary()
{
return await _context.Salary.ToListAsync();
}
}
}
< /code>
Dies ist die Datei app.comPonent.html. < /p>
Employee Details
- Employees
< /code>
Hier ist die Datei von powers.component.html. < /p>
First Name
Last Name
Department
Date Of Joining
Total Salary
{{dataItem.firstName}}
{{dataItem.lastName}}
{{dataItem.department}}
{{dataItem.joinDate}}
{{dataItem.totalSalary}}
View Salary Components
Edit
< /code>
Dies ist der Code für die salies.component.html -Datei. < /p>
Basic
Allowance
Bonus
{{dataItem.basic}}
{{dataItem.allowance}}
{{dataItem.bonus}}
< /code>
Hier ist die Datei von powers.component.ts. < /p>
import { Component, OnInit } from '@angular/core';
import { ApiserviceService } from '../apiservice.service';
@Component({
selector: 'app-employees',
templateUrl: './employees.component.html',
styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
constructor(private service: ApiserviceService) { }
EmployeeList: any = [];
ngOnInit(): void {
this.refreshEmpList();
}
refreshEmpList() {
this.service.getEmployeeList().subscribe(data => {
this.EmployeeList = data;
});
}
}
< /code>
Hier ist die Datei salies.component.ts. < /p>
import { Component, OnInit } from '@angular/core';
import { ApiserviceService } from '../apiservice.service';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-salaries',
templateUrl: './salaries.component.html',
styleUrl: './salaries.component.css'
})
export class SalariesComponent implements OnInit {
constructor(private service: ApiserviceService) {
}
SalaryList: any = [];
ngOnInit(): void {
this.refreshSalary();
}
refreshSalary() {
this.service.getSalaryList().subscribe(data => {
this.SalaryList = data;
});
}
}
< /code>
Dies ist mein Dienst als Apiservice. < /p>
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ApiserviceService {
constructor(private http: HttpClient) { }
getEmployeeList(): Observable {
return this.http.get('employees');
}
getSalaryList(): Observable {
return this.http.get('salaries');
}
}
< /code>
So wird Routing in der Datei App-Routing-Module.ts erfolgen. < /p>
const routes: Routes = [
{ path: 'employees', component: EmployeesComponent },
{ path: 'salaries', component: SalariesComponent },
{ path: 'editEmployee', component: EditEmployeeComponent },
];
< /code>
Wenn ich auf den Gehaltslink klicke und die Konsole unter Entwickler -Tools im Browser beobachte, sehe ich einen Fehler, der < /p>
SyntaxError: Unerwartetes Token '' '< /p> < /> < /> < /Blockquote>
Die Reaktionseigenschaft zu treiben. Anruf < /p>
< /blockquote>
Wie in dieser Seite vorgeschlagen, habe ich versucht, die Basis -HREF in der Seite index.html wie diese zu ändern, aber das hat auch nicht funktioniert. < /p>
to
< /code>
Basierend auf einer anderen Antwort Ich habe den Code in der Dienstklasse wie dieser geändert. < /p>
getSalaryList(): Observable {
const httpOptions: Object = {
headers: new HttpHeaders({
'Accept': 'text/html',
'Content-Type': 'text/plain; charset=utf-8'
}),
responseType: 'text'
};
return this.http.get('salaries', httpOptions);
}
< /code>
Dies drückt auch nicht auf die Controller -Aktionsmethode. Und gibt mir einen Fehler in der Browserkonsole, in dem < /p>
ng0900: Fehler versucht, zu differenzieren ... nur Arrays und Iterelemente sind erlaubt. Aber die Antworten scheinen unvollständig zu sein. Die meisten Fragen haben keine ausgewählte Antwort und die Vorschläge zu den Antworten scheinen für dieses Problem nicht zu funktionieren. Ich poste diese Frage also.
Obwohl ich verschiedene Vorschläge ausprobiert habe, weil sie in Antworten angegeben werden. Ich bin mystifiziert, warum der Code nicht für Gehälter funktioniert, während er für Mitarbeiter funktioniert.>
