В приложении Angular 6 функция array.find не находит существующий элемент в массиве.

Question

У меня проблема с приложением Angular 6, и я действительно не могу найти ответ прямо сейчас, поэтому, пожалуйста, помогите мне, если сможете.Спасибо.Проблема в следующем:

У меня есть массив (userDocuments) с этим содержимым:

[{"DocumentId":1,"DocumentName":"Osobna iskaznica","Mark":"13994000"},{"DocumentId":2,"DocumentName":"Putovnica","Mark":"qprtobm777"}].

Из этого массива заполняется выпадающий список.Рядом с выпадающим меню находится кнопка, которая используется для редактирования содержимого выбранного элемента в диалоговом окне.

<select id="select-document" class="form-control" [(ngModel)]="selectedDocumentId">
    <option *ngFor="let document of userDocuments" [value]="document.DocumentId">
    {{ document.DocumentName }} ({{ document.Mark }})</option>
    </select>
<button class="btn btn-danger btn-40 ml-1" type="button" (click)="openDocumentDailog(true)"> <i class="fa fa-edit"></i></button>

После инициализации компонента при заполнении выпадающего меню и открытии диалогового окна нажатия кнопки редактирования с данными выбранного элемента массива.Все отлично работаетЗатем я выбираю второе значение из выпадающего списка и получаю ошибку о неопределенном элементе.Вот вызывающий метод для редактирования:

openDocumentDailog(edit: boolean) {
    const currentDoc = this.userDocuments.find(x => x.DocumentId === this.selectedDocumentId);
    console.log('array: ' + JSON.stringify(this.userDocuments));
    console.log('DocumentId: ' + this.selectedDocumentId);
    console.log(this.userDocuments.find(x => x.DocumentId === this.selectedDocumentId));

    const dialogRef = this.dialog.open(NewDocumentComponent, {
      width: '400px',
      data: {
        userId: this.loggedUser.id,
        edit: edit,
        docId: edit ? currentDoc.DocumentId : null,
        docName: edit ? currentDoc.DocumentName : null,
        docMark: edit ? currentDoc.Mark : null
      }
    });

...

Для переменной currentDoc я получаю ошибку, которая не определена во втором поиске.Как вы можете видеть, я записываю значения.Вот результаты:

array: [{"DocumentId":1,"DocumentName":"Osobna iskaznica","Mark":"13994000"},{"DocumentId":2,"DocumentName":"Putovnica","Mark":"qprtobm777"}]

DocumentId: 1

Object { DocumentId: 1, DocumentName: "Osobna iskaznica", Mark: "13994000" }

array: [{"DocumentId":1,"DocumentName":"Osobna iskaznica","Mark":"13994000"},{"DocumentId":2,"DocumentName":"Putovnica","Mark":"qprtobm777"}]

DocumentId: 2

undefined

В коде для меня все выглядит правильно, потому что значение documentId (1 или2) присутствует в одном из элементов массива.Также я должен сказать, что когда я выбираю обратно первое значение из выпадающего списка, также появляется сообщение об ошибке неопределенного элемента.После первого редактирования последующие правки больше не работают из-за метода array.find.

Я что-то упустил или проблема где-то глубже?Спасибо.

Желько

Answer 1

Для сравнения нужно помнить, что === проверяет значение и типа.В вашем json идентификаторы имеют тип number, но в то время как в вашем шаблоне вы используете value, по умолчанию это строка.Если вы хотите сохранить свой идентификатор как number, вам нужно использовать [ngValue]:

<select id="select-document" class="form-control" [(ngModel)]="selectedDocumentId">
  <option *ngFor="let document of userDocuments" [ngValue]="document.DocumentId">
    // ...
  </option>
</select>

StackBlitz

Answer 2

Уже selectedDocumentId уже инициализирован?

Вы можете сделать что-то вроде:

// the dropdown will select the first item by default
    constructor() {
      this.selectedDocumentId = this.userDocuments[1].DocumentId;
    }

Секунда:

const currentDoc = this.userDocuments.find(x => x.DocumentId === this.selectedDocumentId);

x.DocumentId - это int, но this.selectedDocumentId - это строка, вы сравниваете int с string с ===.

решение:
Вы можете сделать {"DocumentId":"1"(string),"DocumentName":"Osobna iskaznica","Mark":"13994000"},...

или сделайте x.DocumentId === parseInt(this.selectedDocumentId,10), чтобы решить проблему.

Answer 3

Вы используете строгое сравнение (например, ===), и это верно только в том случае, если операнды одного типа и содержимое совпадает.Содержимое (DocumentId & this.selectedDocumentId) совпадает, но операнды бывают разных типов.Попробуйте использовать == вместо ===, похоже, он не находит ваш документ из-за этого:

const currentDoc = this.userDocuments.find(x => x.DocumentId == this.selectedDocumentId);

stackblitz