无法在角度中更新子组件属性

Question

我有一个过滤数据的功能。当我在过滤器弹出窗口中输入一些值时，它会成功显示结果。然后我在本地存储中添加这些数据(因为我需要将这些数据保留在反向链接上(，然后我重定向到另一个页面，当我按下当前页面上的"后退"按钮并导航到同一个过滤器组件时，我需要从本地存储中设置过滤器组件值，但我收到了这样的错误"；无法在SearchUserGridComponent.autoFillAdvanceSearch上设置未定义的属性"status">我在这个问题上很努力，请帮忙。代码如下所示。

**SearchUserGridComponent.ts**

@ViewChild('callDialog', { static: true }) callDialog: TemplateRef<any>;
openUserAdvancedSearchPopup() {
let dialogRef = this.dialog.open(this.callDialog,{
width: "80vw",
maxWidth: "1366px",
disableClose: true
});
}
**search-user-grid.component.html**
<ng-template #callDialog let-ref>
<div *ngIf="design?.is_advanced_search_enabled" class="advanced-search" [ngClass]="{'show-advanced-search':showAdvancedSearch}">
<advanced-user-search-component *ngIf="searchColumns?.length>0" [columns]="searchColumns" [dropDown]="dropDown"
(getSearchedParams)="getSearchedParams($event)" (getSearchedTerms)="getSearchedTerms($event)"
backgroundColor="rgba(190, 190, 190, 0.4)">
</advanced-user-search-component>
</div>
</ng-template>
**advanced-user-search.component.ts**
search() {
debugger
let params = new HttpParams();
if (this.status != null && this.status != "A") {
if (this.status == "AC") {
params = params.append('isActive', "" + true)
}
else if (this.status == "I") {
params = params.append('isActive', "" + false)
}
}
if (this.passwordComplexity != null && this.passwordComplexity != "A") {
if (this.passwordComplexity == "D") {
params = params.append('IsDefaultPolicy', "" + true)
}
else if (this.passwordComplexity == "S") {
params = params.append('IsDefaultPolicy', "" + false)
}
}
if (this.userLockedUnlocked != null && this.userLockedUnlocked != "A") {
if (this.userLockedUnlocked == "U") {
params = params.append('IsLocked', "" + false)
}
else if (this.userLockedUnlocked == "L") {
params = params.append('IsLocked', "" + true)
}
}
if (this.selectedEntity && this.selectedEntity.entityId) {
params = params.append('entities', "" + this.selectedEntity.entityId)
}
if (this.selectedEntityType != null) {
params = params.append('entityTypes', "" + this.selectedEntityType)
}
// console.log(this.selectedRoles)
if (this.selectedRoles != null) {
let roleString = "";
this.selectedRoles.forEach(role => {
roleString = roleString + "," + role
})
params = params.append('roles', "" + roleString)
}
if (this.selectedBranch && this.selectedBranch.branchid) {
params = params.append('branchid', "" + parseInt(this.selectedBranch.branchid));
}
this.getSearchedParams.emit(params);
this.dialog.closeAll();
}

当用户单击后退按钮时，这些方法将在search-user-Grid.component.ts 上调用

**SearchUserGridComponent.ts**
ngAfterViewInit() {
if (this.isBack == "true" && this.design.screen_name == "searchUsers") {
this.showAdvancedSearch = true;
this.autoFillAdvanceSearch();

}
}
@ViewChild("advancedSearchComponent", { static: false }) advancedSearchComponent: AdvancedUserSearchComponent;
autoFillAdvanceSearch() {
let userSearchData = JSON.parse(localStorage.getItem("userSearchData"))
if (userSearchData != null && userSearchData != undefined) {
if (userSearchData["search"] == undefined || userSearchData["search"] == null) {
this.searchTerm = "";
}
else {
this.searchTerm = userSearchData["search"];
}
let status = userSearchData["isActive"];
if (status == "true") { // Status
this.advancedSearchComponent.status = "AC";
}
else if (status == "false") {
this.advancedSearchComponent.status = "I";
//**Error throwing from here it tells "Cannot set property 'status' of undefined at SearchUserGridComponent.autoFillAdvanceSearch"**//
}
else {
this.advancedSearchComponent.status = "A";
}
let IsDefaultPolicy = userSearchData["IsDefaultPolicy"];
if (IsDefaultPolicy == "true") { // IsDefaultPolicy
this.advancedSearchComponent.passwordComplexity = "D";
}
else if (IsDefaultPolicy == "false") {
this.advancedSearchComponent.passwordComplexity = "S"
}
else {
this.advancedSearchComponent.passwordComplexity = "A";
}
let IsLocked = userSearchData["IsLocked"];
if (IsLocked == "true") { // IsLocked
this.advancedSearchComponent.userLockedUnlocked = "L";
}
else if (IsLocked == "false") {
this.advancedSearchComponent.userLockedUnlocked = "U"
}
else {
this.advancedSearchComponent.userLockedUnlocked = "A";
}

let entityTypes = userSearchData["entityTypes"];
if (entityTypes != undefined && entityTypes != null && entityTypes != "") {
this.advancedSearchComponent.selectedEntityType = Number(entityTypes);
this.advancedSearchComponent.populateEntity();
}
let entityId = userSearchData["entities"];
if (entityId != undefined && entityId != null && entityId != "") {
this.advancedSearchComponent.selectedEntity.entityId = Number(entityId);
this.advancedSearchComponent.getSelectedEntity(this.advancedSearchComponent.selectedEntity);
setTimeout(() => {
this.advancedSearchComponent.selectedEntity.entityId = Number(entityId);
this.advancedSearchComponent.selectedEntity.name = this.advancedSearchComponent.entities.filter(entity => entity.entityId == Number(entityId))[0].name;
}, 1000)
}
let roles = userSearchData["roles"];
if (roles != undefined && roles != null && roles != "") {
this.advancedSearchComponent.selectedRoles = roles.split(',').slice(1).map(i => Number(i));
}
let branchid = userSearchData["branchid"];
if (branchid != undefined && branchid != null && branchid != "") {
setTimeout(() => {
this.advancedSearchComponent.selectedBranch.branchid = Number(branchid);
this.advancedSearchComponent.selectedBranch.name = this.advancedSearchComponent.branches.filter(branch => branch.branchid == Number(branchid))[0].name;
}, 1000)
}

let sortingEvent = JSON.parse(userSearchData["sortingEvent"]);
if (sortingEvent != null && sortingEvent != '') {
this.sort.direction = sortingEvent["direction"];
this.sort.active = sortingEvent["active"];
}

setTimeout(() => {
this.advancedSearchComponent.search()
}, 1000)
if (userSearchData["showAdvancedSearch"] == "true") {
this.showAdvancedSearch = true
}
else {
this.showAdvancedSearch = false
}

}
}

Answer 1

此错误表示未定义advancedSearchComponent。这意味着您的viewchild找不到任何id为advancedSearchComponent的项目。因此，只需将#advancedSearchComponent添加到<advanced-user-search-component></advanced-user-search-component>中，它就可以解决这个问题。