在 Angular 6 应用程序中，array.find 函数在数组中找不到现有元素答案

【问题标题】：In Angular 6 app array.find function doesn't find existing element in array在 Angular 6 应用程序中，array.find 函数在数组中找不到现有元素
【发布时间】：2019-07-04 03:01:17
【问题描述】：

我的 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"}]

文档编号：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 方法，下一次编辑不再起作用。

我是遗漏了什么还是更深层次的问题？谢谢。

泽利科

【问题讨论】：

在头痛了两天之后，在发布案例后我发现问题出在 ...find(x => x.DocumentId === this.selectedDocumentId) 但不知道为什么。在打字稿中 selectedDocumentId 被指定为一个数字（与下拉 ngModel 关联的变量），因此在比较值时一切看起来都是正确的。以防万一我在 this.selectedDocumentId 之前添加了 plus(+) 以转换为数字并现在查看应用程序是否有效。不知道为什么。有什么想法吗？
不，我没有。
我现在尝试使用一些 selectedDocumentId 初始值，但不强制转换为数字仍然不起作用。

标签： javascript arrays angular

【解决方案1】：

您正在使用严格比较（例如 ===），并且仅当操作数的类型相同且内容匹配时才为真。内容（DocumentId 和 this.selectedDocumentId）匹配，但操作数的类型不同。尝试使用== 而不是===，它似乎因此找不到您的文档：

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

stackblitz

【讨论】：

【解决方案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) 解决问题。

【讨论】：

是的，当数组填充数据时。如下面的回答中所述，我将代码从 value 更改为 ngValue 以将变量保留为数字，现在一切正常。谢谢。

【解决方案3】：

相比之下，我们需要记住=== 检查值和类型。在您的 json 中，id 的类型为 number，但在您的模板中，您使用的是默认为字符串的 value。如果你想保持你的 id 为number，你需要使用[ngValue]：

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

StackBlitz

【讨论】：

是的，就是这样。我改为ngValue。谢谢你100倍！ :)