标签: angular-ng-if

参考早期关于ng-if在DIV中的帖子以供参考此处给出的链接:: Ng-If如果在DIV内,但是当我尝试使用ng-if在ng-repeat on td内表时,它似乎没有工作得很好.纠正我,如果我错了我根据条件做了2次尝试显示列但没有工作.下面我给出了参考代码.有人可以帮我这个吗？如果您需要更多说明,请告知.

HTML

试试:: 1

   <table>
        <tr ng-repeat = "data in comments">
            <td ng-if="data.type == 'hootsslllll' ">
             //differnt template with hoot data
            </td>
            <td ng-if="data.type == 'story' ">
             //differnt template with story data
            </td>
            <td ng-if="data.type == 'article' ">
            //differnt template with article data
            </td>
        </tr>

    </table>

试试:: 2

<table>
    <tr ng-repeat = "data in comments">
        <div ng-if="data.type == 'hootsslllll' ">
            <td> //differnt template with hoot data </td>
        </div>
        <div ng-if="data.type == 'story' ">
            <td> //differnt …

所以我有这两个按钮:

<a class="router-link nav-item" routerLink="/login" *ngIf="!isLoggedIn$ | async">
  Login
</a>
<a class="router-link nav-item" (click)="onLogout()" *ngIf="isLoggedIn$ | async">
  Logout
</a>

注销按钮完美运行,只要用户登录,按钮就会出现.但登录按钮永远不会出现.

这是背后的代码isLoggedIn$:

isLoggedIn$: Observable<boolean>;

ngOnInit() {
  this.isLoggedIn$ = this.authService.isLoggedIn;
}

AuthService:

private loggedIn = new BehaviorSubject<boolean>(false);

get isLoggedIn() {
  return this.loggedIn.asObservable();
}

希望这是足够的信息,问题很明显,提前谢谢!

我有一个扩展/收缩的容器.容器内部有一个元素,当容器膨胀时应该淡入,当容器收缩时应该淡出.

我的问题

• 当容器展开时,两个元素的动画都有效.
• 当容器缩小时,只有容器动画才有效.
• 如果我删除容器扩展动画,则淡入/淡出动画将按预期工作.

如何在扩展/收缩条件下并行执行所有动画？

注意使用ngIf.这是故意的,因为它会破坏动画序列末尾的元素.

这是我当前状态的一个傻瓜:https://embed.plnkr.co/TXYoGf9QpErWmlRvQF9Z/

组件类:

export class App {
  expanded = true;

  toggleExpandedState() {
    this.expanded = !this.expanded;
  }

  constructor() {
  }
}

模板:

<div class="container" [@expansionTrigger]="expanded">
  <div class="constant-item"></div>
  <div class="fade-item" [@stateAnimation] *ngIf="expanded"></div>
</div>

<button (click)="toggleExpandedState()">Toggle Fade</button>

和组件动画:

  trigger('expansionTrigger', [
    state('1', style({
      width: '250px'
    })),
    state('0', style({
      width: '160px'
    })),
    transition('0 => 1', animate('200ms ease-in')),
    transition('1 => 0', animate('200ms ease-out'))
  ]),
  trigger('stateAnimation', [
    transition(':enter', [
      style({
        opacity: 0
      }),
      animate('200ms 350ms ease-in', …

我想检查一个对象的属性值，并想检查要比较的字符串数据。

<div ng-if="results.dataType === 'textTable'"> 
     This text belongs in a table. 
</div>

到目前为止，所有 div 都与正文中的文本一起出现，其中只有两个 div 应该显示它。

我的 ng-if 语句和字符串比较有什么问题吗？

有一个在Angular中使用* ngIf的很好的文档：https ://angular.io/api/common/NgIf 但是，是否可以使用* ngIf异步变量并对此进行多次检查？就像是：

<div *ngIf="users$ | async as users && users.length > 1">
...
</div>

当然，可以使用嵌套的* ngIf，例如：

<div *ngIf="users$ | async as users">
    <ng-container *ngIf="users.length > 1">
    ...
    </ng-container>
</div>

但最好只使用一个容器，而不是两个。

我有这个JSON文件,我将对象作为产品.当json对象具有"kids":"1"时,当我想要将产品的大小从"sizes:"更改为"kids:"时,显示产品的大小.

<div class="sizes-wrap">
        <span class="size-label"><span>sizes:</span>
        <span class="sizes">{{ item.sizes }}</span>
</div>

此代码打印尺寸:和json的尺寸,例如"128厘米,140厘米,152厘米,164厘米"

我想在json对象中,"kids"的值为1,将html中的"sizes"改为"kids".

<div class="sizes-wrap">
        <span class="size-label"><span>kids:</span>
        <span class="sizes">{{ item.sizes }}</span>
</div>

这是一个json对象:

  "kids": "0",
  "name": "Product name",
  "sizes": "Small,Medium,Large,X-Large,XX-Large,3XL",
  "kid_adult": "0",
  "free_porto": "0",
  "price": "649,00",
  "package": "0",
  "delivery": "1-2 dage",
  "price_old": "0,00",
  "id": "133714",
  "women": "0"

这毕竟是我想要实现的:

<div class="sizes-wrap">
        <span ng-if="item.kids == 0 && item.kid_adult == 0 && item.women == 0" class="size-label"><span>sizes:</span></span>
        <span ng-if="item.kids == 1" class="size-label"><span>kids:</span></span>
        <span ng-if="item.kid_adult == 1" class="size-label"><span>adult kids:</span></span>
        <span ng-if="item.kid_adult == 1" class="size-label"><span>women:</span></span>
        <span class="sizes">{{ …

我有问题和答案的JSON字符串绑定在ng-repeat中,现在问题是我想在ng-repeat中显示一次问题和所有多个答案.这是我的数据.

{Answer:"White",AnswerID:967,answer_type:"RADIO",fullquestion:"Your Race",id:6}{Answer:"African American",AnswerID:968,answer_type:"RADIO",fullquestion:"Your Race",id:6}{Answer:"Asian",AnswerID:969,answer_type:"RADIO",fullquestion:"Your Race",id:6}

我正在展示的观点

 <div ng-repeat="hrq in HrqQuestions">
            <div class="list card normal">
                <div class="item item-body item-divider">                    
                    <p ng-bind="hrq.fullquestion"></p>                       
                </div>
                <label class="item item-input" ng-show="hrq.answer_type=='FREETEXT'">
                    <input ng-model="hrq.Answer" name="name" type="text">
                </label>
                <div ng-if="hrq.answer_type=='RADIO'">
                    <ion-radio ng-click="selectedAnswer(hrq.AnswerID,hrq.Answer)" name="radio1" ng-value="hrq.AnswerID">{{hrq.Answer}}</ion-radio>
                </div>
            </div>
        </div>

但这会多次将所有问题与答案联系起来

     Q.Your Race
           White Your Race
     Q.Your Race
           African American Your Race
     Q.Your Race
           Asian

但我需要

     Q. Your Race
           White Your Race
           African American Your Race
           Asian

如果有人能帮助我,我将非常感激

这个小提琴说明了问题http://jsfiddle.net/LAqeX/2/

我想创建一个包含页面一部分并隐藏它的指令.我想使用ng-if删除不必要的绑定.但是一些黑魔法发生了.

这是我最喜欢的指令代码.

app.directive('withIf', function(){
    return {
        restrict: 'E',
        scope: {
            title: '@'
        },
        transclude: true,
        template: '<div>' +
        '<p ng-click="visible = !visible">{{title}}</p>' +
        '<div ng-if="visible" ng-transclude></div>'+
        '</div>',
        link: function(scope){
            scope.visible = false;
        }
    }
});

它应该创建两个范围:

1. 指令隔离范围有两个变量 - 标题和可见
2. Transcluded范围,原型继承自"常规"范围树.

然而,ng-if使得被转移的范围有点脱离现实,并且trasncluded范围不会从控制器继承.请看小提琴,它说明问题非常明确.

任何想法在那里发生了什么以及如何解决它？

UPDATE

我似乎已经找到了范围链看起来破碎的原因.由ng-if创建的范围属于withIf指令isolate分支.所以它永远不知道控制器的范围是否存在.但问题仍然是相同的 - 如何在这种情况下使用ng-if.

在我的应用程序中,我尝试放置一个按钮,显示/隐藏带有布尔组件属性的输入字段.如果按钮显示输入,则应在输入上设置焦点.但它似乎不起作用.如果我删除input焦点指令工作正常.

我创造了一个显示我的意思的plunker.描述我的"问题"有点困难.

组件中的html

<input *ngIf="filterShow.options"
       [focus]="filterFocus.options"
       [(ngModel)]="filter.options">

<button type="button"
        (click)="setShowFilter('options')">
  focus
</button>

setShowFilter()函数

private setShowFilter(filter: string) {
  this.filterShow[filter] = !this.filterShow[filter];

  /* reset filter */
  this.filter[filter] = "";

  this.filterFocus[filter].emit(true);
}

focus.directive.ts

@Directive({
  selector: '[focus]'
})
export class FocusDirective implements OnInit {

  @Input('focus') focusEvent: EventEmitter<boolean>;

  constructor(private elementRef : ElementRef,
              private renderer   : Renderer   ) { }

  ngOnInit() {
    this.focusEvent.subscribe(event => {
      this.renderer
        .invokeElementMethod(this.elementRef.nativeElement, 'focus', []);
    });
  }
}

我正在开发我的第一个 angular2 应用程序，我需要实现一个允许编辑和查看模式的表单。

在查看模式下，所有文本框项都必须启用，否则当我处于查看模式时，我想显示简单的纯文本（如 span 元素）。

这样做的最佳做法是什么？

是否有一些标准组件或者我必须实现一些 ngIf ？

谢谢