无法以角度更新子组件属性

Posted 2023-03-13

【中文标题】无法以角度更新子组件属性

【英文标题】：Can't Update child components property in angular

【发布时间】：2021-07-21 17:47:19

【问题描述】：

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

**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
            


        
    

【参考方案1】：

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