如果选定的详细信息值在角度4中为空，则隐藏输入字段

Question

  

  
• 我的问题是，如果我选择其中一个类别（如果serviceName为null），则某些响应具有serviceName值，而某些响应则没有serviceName值，它显示错误为““无法读取未定义的属性'serviceName'” / strong>
  
• 我需要的是，如果选定的值为null，则仅当选定的值存在时才应隐藏该字段，它应显示如何实现的详细信息
  
• 任何建议都会被接受，谢谢。
  

<div class="custom-form">
     <div class="col-6 col-lg-4" *ngFor="let cat of values">
        <div class="tab-wrapper v1">
            <div class="list">
              <div class="item" >
                <div class=tab-btn (click)="onSelect(cat)"><a href="#"><i class="fa fa-plus" aria-hidden="true"></i> {{cat.categoryName}}</a></div>
                <div class="tab-content">
                  <div class=" fl-wrap filter-tags" *ngIf="selected">
                     <input type="checkbox" name="check1">
                        <label for="check-a">{{selected?.categoryServicemodel[0].serviceName}} </label>
                      <input type="checkbox" name="check2">
                        <label for="check-b">{{selected?.categoryServicemodel[1].serviceName}}   </label>                              
                   </div>                    
                </div>
              </div>
            </div>
        </div>
     </div>
 </div>

  

这是我的component.html文件

     

这是我的component.ts

export class Component{
 selected: any ={};
    constructor(private router: Router, private mapsAPILoader: MapsAPILoader, private ngZone: NgZone, private service: PostGetService) {
   this.service.getAllCategories()
       .subscribe((categories:any )=>{
       // console.log(categories.json().length);
         this.values = categories.json();
         console.log(this.values);
       })
        onSelect(category){
        this.selected = category;
        console.log(category);
    }
  }

  

这是我的回应    

Answer 1

由于并非所有serviceName数组都包含两个元素，因此由于尝试访问categoryServicemodel属性而发生错误。 通过不对模板中的索引进行硬编码，而是使用*ngFor，可以解决此问题。

由于isActive标志不是布尔值，因此该复选框无法通过香蕉框语法[(ngModel)]直接绑定。

初始值可以转换为带有双重否定“ !!”的布尔值并绑定到[ngModel] =“ !! category.isActive”复选框。 现在，每次单击复选框都必须将其转换为数字并分配给模型。 (ngModelChange)="category.isActive = $event ? 1 : 0"

我建议将isActive标志的类型调整为布尔值。这将使事情变得容易。

...
<div class="tab-content">
    <div class=" fl-wrap filter-tags" *ngIf="selected">
        <label *ngFor="let category of selected.categoryServicemodel; let i = index">
            <input type="checkbox" [ngModel]="!!category.isActive" (ngModelChange)="category.isActive = $event ? 1 : 0" name="indx{{i}}"> {{category.serviceName}}
        </label>                      
    </div>    
</div>
...