Как получить значение из объекта, которое происходит из отношения ManyToOne в Angular CLI? - PullRequest
Новая
       14

Как получить значение из объекта, которое происходит из отношения ManyToOne в Angular CLI?

0 голосов
/ 14 марта 2019

Я использую Spring Boot, Angular CLI и mySQL.

У меня есть Сотрудник, который может иметь одно Семейное положение, и один Статус M может быть в N Сотрудниках.

В localHost: 8080 я получаю правильный массив json: 

[{"id":1,"firstName":"Name","lastName":"surname1","emailAddress":"test@test1.com","status":{"statusId":1,"nameStatus":"Single"}

В моей угловой таблице (localHost: 4200) вместо этого я получаю все данные, но в столбце «Состояние» я получаю «[объект объекта]».

У каждого есть сервис для каждого.

Когда я делаю регистрацию, у меня появляется статус dropDown со всеми, поэтому я получаю их.

Это моя таблица HTML: 

<table class="table table-bordered">
  <thead>
  <tr>
    <th *ngFor="let col of columns">{{col}}
    </th>
    <th>Actions</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let employee of employees | paginate: {itemsPerPage: pageSize,
                                           currentPage: page,
                                           totalItems: employees.length}  | filterAll: searchString : field">
    <td *ngFor="let col of columns">{{employee[col]}}</td>
    <td>
      <button [ngClass]="getClassCondition(act.actionType)" *ngFor="let act of actions"
              (click)="actionFunc(act, employee)">{{act.label}}</button>
    </td>
  </tr>
  </tbody>
</table>

Здесь у меня есть ngFor, который получает всех сотрудников.

Теперь я также делюсь своими услугами и своими componets.ts:

status.service.ts: 

@Injectable({
  providedIn: 'root'
})
export class StatusService {

  private baseUrl = 'http://localhost:8080/api';

  constructor(
    private http: HttpClient) { }

  getStatus(): Observable<Status[]> {
    return this.http.get<Status[]>(`${this.baseUrl}` + '/status');
  }
}

employee.service.ts 

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

@Injectable({
  providedIn: 'root'
})

export class EmployeeService {

  columns = COLUMNS;
  actions = ACTIONS;

  private baseUrl = 'http://localhost:8080/api/employees';

  constructor(private http: HttpClient) {
  }

  getColumns() {
    return this.columns;
  }

  getActions() {
    return this.actions;
  }

  getMetadata() {
    return this.metadata;
  }

  /** GET Employees from the server */
  getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(this.baseUrl);
  }

  getEmployee(id: number): Observable<Employee> {
    const url = this.baseUrl + '/' + id;
    return this.http.get<Employee>(url);
  }

  /** PUT: update the employee on the server */
  updateEmployee(employee: Employee): Observable<any> {
    return this.http.put(`${this.baseUrl}/${employee.id}`, employee, httpOptions);
  }

  deleteEmployee(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`, {responseType: 'text'});
  }

}

Здесь у меня также есть имя const w / COLUMNS. employee.ts 

export const COLUMNS = ['id', 'firstName', 'lastName', 'emailAddress', 'status'];

export class Employee {
  id: number;
  firstName: string;
  lastName: string;
  emailAddress: string;
  status: string;
}

status.ts 

export class Status {
  statusId: number;
  nameStatus: string;
}

Что мне нужно сделать, чтобы получить мой статус. Имя? Есть что-то конкретное?

Если вам нужно больше документации, спросите меня.

Ответы [ 2 ]

0 голосов
/ 14 марта 2019

Вы должны быть более конкретным, как вы отображаете данные или отображаете данные в структуру, которую вы хотите

1) вместо <td *ngFor="let col of columns">{{employee[col]}}</td> вы можете сделать 

<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
...
<td>{{employee.status.nameStatus}}</td>

2) перед привязкой данных сопоставьте их с желаемой структурой (в вашем файле контроллера / *. ts).Взгляните на Карта массива ( для этого.

Ваш код не работает, потому что контроллер никогда не назначает метод сотрудника

0 голосов
/ 14 марта 2019

Я подозреваю, что col return status и employee [col] return {"statusId":1,"nameStatus":"Single"}.

Так что ошибка кажется правильной.

Вы можете сделать обходной путь, если вы просто хотите отобразить nameStatus: 

<td *ngFor="let col of columns">{{employee[col]?.nameStatus ? employee[col]?.nameStatus : employee[col]}}</td>
...