相关疑难解决方法(0)

Angular2中的条件ngModel

我有一个要求,我需要将电话号码绑定到ngModel只有它存在.我的代码如下:

<cd-input
  size="15"
  [(ngModel)]="phone_numbers[0].full_number"
  [reformat]="something"
  [format]="something"
  placeholder="(111) 222-3333">
</cd-input>
Run Code Online (Sandbox Code Playgroud)

如果存在电话号码,这很有效,但如果不存在,我会收到以下错误:

无法读取未定义的属性"full_number"

所以基于这个SO帖子LINK,我尝试了以下内容:

<cd-input
  size="15"
  [(ngModel)]="phone_numbers[0].length > 0 ? phone_numbers[0].full_number : null"
  [reformat]="something"
  [format]="something"
  placeholder="(111) 222-3333">
</cd-input>
Run Code Online (Sandbox Code Playgroud)

但是,这会导致语法错误.

未捕获错误:模板解析错误

解决此问题的一种方法是*ngIf再次使用并重复该代码集.但是,我应该怎样做才能内联,就像三元条件检查一样?

angular

7
推荐指数
2
解决办法
1万
查看次数

如何有条件地添加 mat-raised-button?

我的屏幕上有一个按钮,如果用户已经添加点击它,它是一个垫子填充按钮,但如果我没有点击它,它是一个垫子按钮

我的代码看起来像这样

 <button
          *ngIf="myVote !== 'UPVOTE'"
          mat-button
          color="primary"
          (click)="onVote('UPVOTE')"
        >
          UPVOTE
        </button>
        <button
          *ngIf="myVote === 'UPVOTE'"
          mat-flat-button
          color="primary"
          (click)="onVote('NONE')"
        >
          UPVOTE
        </button>
Run Code Online (Sandbox Code Playgroud)

基本上我有两个按钮,只有一个显示。显然,这是非常丑陋的。

有没有办法只用一个按钮就可以达到相同的结果,并且它有条件地是基于一组逻辑的amat-flat-button或 a mat-button

angular-material angular

5
推荐指数
1
解决办法
2325
查看次数

Angular2 - 从元素中删除禁用属性

我有一个使用名为ng-select增强选择输入的指令的表单。在我的设置中,我允许用户进行一些选择,然后单击“过滤器”按钮。

单击此按钮后,我禁用了输入。

HTML:

<div class="form-group">
   <div class="input-group">
      <ng-select #cc formControlName="costCenter" (removed)="updateChoices(cc.active, 'costCenter')" [allowClear]="true" [multiple]="true"
      [items]="getCostCenters()" placeholder="Select one or more Cost Centers">
      </ng-select>
      <span class="input-group-btn">
      <button #b_cc class="btn btn-sm btn-default" type="button" title="Update Filter" (click)="updateChoices(cc.active, 'costCenter', cc, b_cc)"><i class="fa fa-filter"></i></button>
      </span>
   </div>
</div>
Run Code Online (Sandbox Code Playgroud)

组件功能:

    /**
     * Upon selecting a data point, reload available options 
     * based on data selected.
     * 
     * @param formValues 
     * @param field 
     */
    updateChoices(formValues, field, selectInput, button): void {

        // Show the loading indicator
        this.showLoader = …
Run Code Online (Sandbox Code Playgroud)

typescript angular angular-reactive-forms

4
推荐指数
1
解决办法
8173
查看次数

在角度 4 中有条件地设置属性

我想设置元素的 href 属性取决于插值的元素内容。

<div>
    <ul class="contactnav">
        <li *ngFor="let contactItem of contactItems" >
            <a class="{{ contactItem.iconBootStrap }}"  href=" {{ contactItem.contactForm.indexOf('@') }} !== -1? 'mailto:{{ contactItem.contactForm }}' : '#'" data-rel="external">
                {{ contactItem.contactForm }}
            </a>           
        </li>
    </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

如果contactItem.contactForm 包含@ 否则为值'#' 设置,我应该如何在元素中定义条件以设置href 的值?

html typescript angular

4
推荐指数
1
解决办法
1万
查看次数

Disable a radio button conditionally in a radio button group inside Reactive form in Angular 4

I have a reactive form created in component and some formControls defined on it.

Now i need to disable one of the radio button from a radio button group based on some condition.

How do i do it while creating formControl?

PFB the code snippet:

createForm() {
this.heroForm = this.fb.group({
  confirmActionRadioGrp: this.fb.group({
            updateAction: new FormControl({ value: '' })
        })

  });
}
Run Code Online (Sandbox Code Playgroud)

inside my template:

    <div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
<input  type="radio"  class="custom-control-input" value="1" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="2" formControlName="updateAction">
    <input …
Run Code Online (Sandbox Code Playgroud)

forms reactive-forms angular angular-reactive-forms angular4-forms

4
推荐指数
1
解决办法
8994
查看次数

切换Angular的cdkDrag拖放n代码

我正在使用角度7的Drag n Drop,并将其放置在div中:

<div class="myDiv" cdkDrag (dblclick)="toggleDraggable($event)">Div Content Here</div>
Run Code Online (Sandbox Code Playgroud)

所以我需要做的是,当我双击cdkDrag上方的这个div时,它会打开和关闭。

是否消失。只需切换可拖动对象即可。

我怎样才能做到这一点?

angular angular7

3
推荐指数
1
解决办法
176
查看次数