Блог

Главная - Вопросы по программированию - Угловая ошибка TS2532: Объект, возможно, «не определен» в stateorigin.country.name

Угловая ошибка TS2532: Объект, возможно, «не определен» в stateorigin.country.name

#angular

Вопрос:

В моем Aangular-12 у меня есть этот код:

Ответ API Json:

 {
  "message": "States successfully Retrieved.",
  "error": false,
  "code": 200,
  "results": {
    "states": [
        {
            "id": 1,
            "country_id": 1,
            "name": "Cairo",
            "country": {
                "id": 1,
                "capital": "",
                "nationality": "Egyptian",
                "name": "Egypt",
            }
        }
    ]
  }
}

Интерфейс:

 export interface ICstate {
  id?: number;
  name: string;
  country_id: number;
  country?: [];
}

компонент:

государствооригин!: ICstate;

 viewStateModal(row: any) {
  this.stateorigin = row;
}

HTML:

 <a class="btn btn-primary btn-sm" (click)="viewStateModal(row)" data-toggle="modal" data-target="#viewStateModal">
                    View
                  </a>


<div class="modal fade" id="viewStateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> State of Origin Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">amp;times;</span>
            </button>
      </div>

      <div class="modal-body" *ngIf="stateorigin != undefined">
        <div class="col-md-12">
          <div class="row">
            <div class="col-md-6">
              State of Origin: <strong>{{ stateorigin.name || 'N/A' }}</strong>
            </div>
            <div class="col-md-6">
              Country: <strong>{{ stateorigin.country.name || 'N/A' }}</strong>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="hide()">Close</button>
      </div>
    </div>
  </div>

console.log(это.stateorigin);

дает:

 Object
country: {id: 1, nationality: "Egyptian", name: "Egypt",}
country_id: 1
id: 1
name: "Cairo"

Когда я попытался просмотреть подробные сведения о состоянии, я получил эту ошибку:

 error TS2532: Object is possibly 'undefined'.

100       Country: <strong>{{ stateorigin.country.name || 'N/A' }}</strong>

имя выделено в stateorigin.country.name

В стране есть много государственных образований

Как мне решить эту проблему?

Спасибо

Комментарии:

1. измените country?: []; на что-то вроде country?:{id:number,name:string,capitol:string, nationality:string}

2. @depperm — Когда я изменил его в интерфейсе, как вы советовали, это все еще не решило проблему. Ошибка все еще остается

3. ах, это необязательный ключ:значение, поэтому измените его на country: {...} или с ? помощью логики добавления в html, например stateorigin.country?.name || 'N/A' (я думаю, это работает)

4. @depperm — Это работает. Большое спасибо

Ответ №1:

Похоже, есть две проблемы. Первая страна определена как массив, но используется как объект. Обновите тип:

 country?: {id:number, name:string, capital?:string, nationality:string}

Затем в html, поскольку страна необязательна (и может не существовать), вам нужно проверить, прежде чем ссылаться (оператор безопасной навигации).

 stateorigin.country?.name || 'N/A'
Метки: , ,