多重搜索 Angular8 错误“无法读取未定义的属性'value'”

Question

我创建了 form，其中包含两个搜索条件 "breedName"（文本输入）和 "speciesId"（可选择组合框），但我得到了这个搜索时出错：Cannot read property 'value' of undefined.

问题来自 speciesId 如果我尝试更改，它会给我未定义的信息。

How can I fix the undefined error and get the speciesId value while changing the speciesId combo box data?

这是我所做的：

breeds.component.html

<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Enter Breed Name ..."
    formControlName="breedName" name="breedName" id="breedName" aria-label="Search" (input)="getBreedsSearch($event,0)">
<select class="select-option form-control" #speciesId name="speciesId"
(change)="getBreedsSearch('',$event)">
    <option [ngValue]=0 hidden selected>-- select species name --</option>
    <option value=0>-- Select All --</option>
    <option *ngFor="let data of speciesList" [ngValue]="data.speciesId">
        {{data.speciesName}}
    </option>
</select>

breeds.service.ts

getBreedsSearch(breedName: string, speciesId: number) {

    if(speciesId === undefined || speciesId === null)
    {
        speciesId = 0;
        console.log("Species Id = " + speciesId);
    }

    let params = new HttpParams()
        .set("breedName", breedName)
        .set("speciesId", speciesId.toString());

    console.log(params);
    return this.http.get<Apiresponse>(this.baseUrl + 'BreedsMaster/GetBreedsSearch', { params: params })
}

breeds.component.ts

speciesId: number;
breedName: string = "";

getBreedsSearch(breedName, speciesId) {
    this.breedName = breedName.target.value;
    console.log("breedName value = " + this.breedName);
    this.speciesId = speciesId;
    console.log("speciesId value = " + this.speciesId);
    if (this.breedName != null && this.breedName != "") {
        console.log("Inside if statement in getBreedsSearch method");
        this.breedService.getBreedsSearch(this.breedName, this.speciesId).subscribe(result => {
            console.log("Inside the service method in if statement in getBreedsSearch method");
            this.breedsList = result.results;
        }, error => this.toastr.error(error.statusText, '', {
            timeOut: 3000
        }));
    } else {
        console.log("Inside else statement in getBreedsSearch method");
        this.getBreedsList();
        this.getSpeciesList();
    }
}

我用(input)输入字符时获取搜索数据，我用(change)获取组合框中选中的项目并直接获取搜索数据。

How can I get the search data when I do multiple search for both event and avoid error "Cannot read property 'value' of undefined" for speciesId when the combo box change the selected value?

我搜索了很多资源，下面的link是其中之一：
angular 2 cannot read property of undefined

Answer 1

当用户在组合框中选择一个项目时，您调用getBreedsSearch('',$event)。然后在函数的第一行，你尝试获取 breedName.target.value 而 breedName 的值为 "".

您应该检查 breedName 是否包含 target 属性。尝试这样的事情：

getBreedsSearch(breedName, speciesId) {
    this.breedName = breedName.target && breedName.target.value;
    ...

Answer 2

经过长时间的搜索，我找到了解决方案，

I used [(ngModel)] to pass breedNameSearch value, then I changed the getBreedsSearch() paramters to have only one parameter which is speciesId then I passed it using $event.

解决方案：
breeds.component.html

<form class="form-inline" #searchForm>
<input class="form-control mr-sm-2" type="search" placeholder="Enter Breed Name ..."
name="breedNameSearch" id="breedNameSearch" aria-label="Search"
(input)="getBreedsSearch()" [(ngModel)]="breedNameSearch">

<select class="select-option form-control" #speciesIdSearch name="speciesIdSearch"
(change)="getBreedsSearch($event.target.value)">
    <option [value]=0 hidden selected>-- select species name --</option>
    <option [value]=0>-- Select All --</option>
    <option *ngFor="let data of speciesList" [value]="data.speciesId">
        {{data.speciesName}}
    </option>
</select>

breeds.service.ts

getBreedsSearch(breedName: string, speciesId: number) {

    if(speciesId === undefined || speciesId === null)
    {
        speciesId = 0;
        console.log("Species Id = " + speciesId);
    }
    if(breedName === null || breedName === "")
    {
        breedName = "All";
    }
    let params = new HttpParams()
        .set("breedName", breedName)
        .set("speciesId", speciesId.toString());

    console.log(params);
    return this.http.get<Apiresponse>(this.baseUrl + 'BreedsMaster/GetBreedsSearch', { params: params })
}

breeds.component.ts

getBreedsSearch(speciesId:number) {
    if(speciesId === undefined || speciesId === null)
    {
        speciesId = 0;
        console.log("Species Id = " + speciesId);
    }
    
    console.log("breedName value = " + this.breedNameSearch);
    console.log("speciesId value = " + speciesId);
    if ((this.breedNameSearch != null || this.breedNameSearch != "") || (speciesId != null)) {
        console.log("If statement in getBreedsSearch method");
        this.breedService.getBreedsSearch(this.breedNameSearch, speciesId).subscribe(result => {
            console.log("Service method in if statement in getBreedsSearch method");
            this.breedsList = result.results;
        }, error => this.toastr.error(error.statusText, '', {
            timeOut: 3000
        }));
    } else {
        console.log("Else statement in getBreedsSearch method");
        this.getBreedsList();
        this.getSpeciesList();
    }
}

这是解决方法，但我相信有很多方法可以做到这一点，希望这个解决方案有所帮助。

多重搜索 Angular8 错误“无法读取未定义的属性'value'”

Multiple Search Angular8 Error 'Cannot read property 'value' of undefined'

angular

typescript

api

angular8

多重搜索 Angular8 错误“无法读取未定义的 属性'value'”

Multiple Search Angular8 Error 'Cannot read property 'value' of undefined'

angular

typescript

api

angular8

多重搜索 Angular8 错误“无法读取未定义的属性'value'”