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

ProgramBox

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

Post author:admin
Запись опубликована:15 мая, 2023
Post category:Вопросы по программированию

#html #angular #spring-boot

#HTML #angular #весенняя загрузка

Вопрос:

Я использую 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"}

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

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

Когда я выполняю регистрацию, у меня есть выпадающий список со статусом «все», поэтому я получаю их.

Это моя 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:

Статус.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');
  }
}

сотрудник.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 с именем СТОЛБЦОВ.
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;
}

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

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

1. пожалуйста, разместите код для вас .ts также

2. Отредактировано @SachinGupta

3. Здравствуйте, можете ли вы добавить ту часть th .ts , где вы объединяете две наблюдаемые? Спасибо.

Ответ №1:

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

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

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

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

1. хорошо, это правильное решение, но когда у меня есть строка без статуса, она не отображается в таблице, и я получаю эту ошибку в консоли: ОШИБКА TypeError: не удается прочитать свойство ‘nameStatus’ неопределенного

2. Как предлагает @Stefan, вы можете сделать <td>{{employee?.status?.nameStatus}}</td> со знаком вопроса, чтобы избежать указателя null. Я отредактировал свое решение.

3. могу ли я сделать то же самое с ManyToMany? пример: у меня также есть навыки с именем и идентификатором, другой сервис, подобный статусу, и в моем employee.ts я добавил «Список навыков: Skill[];». Как я могу сделать то же самое для печати его в моей таблице?

4. Не совсем. Это обходной путь, потому что он работает, только если есть один объект (статус). С несколькими объектами вам придется выбрать другую стратегию.

Ответ №2:

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

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

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

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

Похоже, ваш код не работает, потому что контроллер никогда не назначает метод employee