时间戳

首页 > 解决方案 > 如果选择的详细信息值在角度 4 中为空，则隐藏输入字段

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

问题描述

  • 我的问题是某些响应具有 serviceName 值 如果我选择其中一个类别，如果 serviceName 为空，则某些响应没有 serviceName 值，它显示错误为“无法读取未定义的属性 'serviceName'”
  • 我需要的是，如果选择值为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);
    }
  }

这是我的回应 响应图像

标签： angular

解决方案

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

推荐阅读