小编Sri*_*man的帖子

是否有像安全导航操作员可以在阵列上使用的东西?

我已经使用安全导航操作员对象来加载异步调用,这是非常了不起的.我以为我可以为Arrays重现相同但它在我的Angular代码中显示模板解析错误.我知道*ngIf是一种替代解决方案,但是有一种更简单(通过代码)的方式就像安全导航操作员一样吗?

<div class="mock">
   <h5>{{data?.title}}</h5>  //This works
   <h6>{{data?.body}}</h6>  //This works
   <h6>{{simpleData?[0]}}</h6>  // This is what I tried to implement    
</div>
Run Code Online (Sandbox Code Playgroud)

html typescript safe-navigation-operator angular

10
推荐指数
3
解决办法
2344
查看次数

如何在Angular -2/4中删除双向数据绑定

我正在开发Angular中的Multi Select下拉列表,它也有搜索功能.那时我正在通过我的主数据解析输入字段给出的输入,并且只显示DOM中的过滤内容.这是我的功能:

modifyFilter(value: any) {
        console.log('value', value); //The value passed from DOM
        this.filterContent = this.catalogManufacturerNames; /******/
        for(let i=0; i<this.catalogManufacturerNames.length;i++) {
         /* Search catalogManufacturerNames for the value and splice all
         filterContent not having the matching value */    
        }
    }
Run Code Online (Sandbox Code Playgroud)

代码的问题在于,每次modifyFilter调用该方法时,catalogManufacturerNames它也会随之改变filterContent.因此,每当我打电话时modifyFilter,标记为/******/的行filterContent被分配给前一个而filterContent不是全局,并且可能没有变化catalogManufacturerNames.我认为问题是filterContent并且catalogManufacturerNames得到双向绑定,但我不知道如何根据我的要求修改它.或者还有其他方法可以解决这个问题.欢迎提出建议.

javascript filter angular

8
推荐指数
1
解决办法
3599
查看次数

使用Angular 5在Angular Material自动完成显示中绑定'this'

我试图使用Material Angular自动完成功能,但遇到了displayWith函数,该函数显然可以用作选择时显示的输出。我想在显示功能中调用自定义功能,例如

displayFn(id) {
 return this.getValue(id)
}
getValue(id) {
 /**return some string
}
Run Code Online (Sandbox Code Playgroud)

对于自动完成

<mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let option of outletFilterOptions | async [value]="option.outletId">
   {{ option.outletName }}
  </mat-option>
</mat-autocomplete>
Run Code Online (Sandbox Code Playgroud)

如您所见,我使用id而不是整个对象作为模型。

当显示函数返回未定义this.getValue的错误时,我在Stack Overflow中搜索了一种解决方案,并建议我使用类似的内容[displayWith]="displayFn.bind(this)"

但不幸的是,这对我也不起作用。我正在使用Angular材质5.1.0。

我有什么想念的吗?

javascript angular-material angular-material2 angular angular-material-5

4
推荐指数
2
解决办法
2227
查看次数