标签: angular-ng-if

我在尝试使用Angular *ngFor和*ngIf同一个元素时遇到了问题.

当尝试遍历集合中的集合时*ngFor,集合被视为null并因此在尝试访问模板中的属性时失败.

@Component({
  selector: 'shell',
  template: `
    <h3>Shell</h3><button (click)="toggle()">Toggle!</button>

    <div *ngIf="show" *ngFor="let thing of stuff">
      {{log(thing)}}
      <span>{{thing.name}}</span>
    </div>
  `
})

export class ShellComponent implements OnInit {

  public stuff:any[] = [];
  public show:boolean = false;

  constructor() {}

  ngOnInit() {
    this.stuff = [
      { name: 'abc', id: 1 },
      { name: 'huo', id: 2 },
      { name: 'bar', id: 3 },
      { name: 'foo', id: 4 },
      { name: 'thing', id: 5 },
      { …

我正在尝试开始角度开发.在审阅文档后,一些问题仍然存在.我如何最好ng-if用多个参数写一个对应的

if( a && b) 要么 if( a || b )

我如何在*ngIf声明中有多个案例？我习惯于Vue或Angular 1有一个if,else if和else,但似乎Angular 4只有一个true(if)和false(else)条件.

根据文档,我只能这样做:

  <ng-container *ngIf="foo === 1; then first else second"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

但我希望有多种条件(类似):

  <ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

但我最终不得不使用ngSwitch,感觉就像一个黑客:

  <ng-container [ngSwitch]="true">
    <div *ngSwitchCase="foo === 1">First</div>
    <div *ngSwitchCase="bar === 2">Second</div>
    <div *ngSwitchDefault>Third</div>
  </ng-container>

或者,似乎很多Angular 1和Vue中习惯使用的语法在Angular 4中都不受支持,那么建议用这样的条件构造代码的方法是什么？

为什么这不起作用.

<li ng-if="!area"></li>

从那时起感觉有点不合逻辑

<li ng-if="area"></li>

工作得很好.

'area'在范围内定义为true/false这是什么解决方法？我不想使用ng-show/ng-hide,因为它们都在DOM中呈现项目.

我有一个auto-carousel指令迭代链接元素的子元素.

然而,子节点尚未加载到DOM中,因为它们ng-if的表达式尚未被解析.

如何确保父指令知道它的DOM树有变化？

        <ul class="unstyled" auto-carousel>
          <li class="slide" ng-if="name">{{name}}</li>
          ...
          <li class="slide" ng-if="email">{{email}}</li>
        </ul>

我可以使用,$timeout但感觉不可靠.我也可以使用ng-show而不是ng-if但不回答问题,而不是我需要的问题.

取决于(布尔)类变量的值,我希望我ng-content将其包装在div中或不包含在div中(即div甚至不应该在DOM中)...什么是最好的方法去对这个 ？我有一个尝试这样做的Plunker,在我认为是最明显的方式,使用ngIf ..但它不起作用...它只显示其中一个布尔值的内容,但不显示另一个

亲切的帮助谢谢!

http://plnkr.co/edit/omqLK0mKUIzqkkR3lQh8

@Component({
  selector: 'my-component',
  template: `

   <div *ngIf="insideRedDiv" style="display: inline; border: 1px red solid">
      <ng-content *ngIf="insideRedDiv"  ></ng-content> 
   </div>

   <ng-content *ngIf="!insideRedDiv"></ng-content>     

  `,
})
export class MyComponent {
  insideRedDiv: boolean = true;
}


@Component({
  template: `
    <my-component> ... "Here is the Content"  ... </my-component>
  `
})
export class App {}

我试图根据我从对象获得的值标记为默认的radiobutton,它可以是True或False.根据选项,我可以做什么来标记为默认的单选按钮？

<label>This rule is true if:</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" value="true" 
        [(ngModel)]="rule.mode"> all of the following conditions are true
</label>
<label class="form-check-inline">
    <input class="form-check-input" type="radio" name="mode" value="false"
        [(ngModel)]="rule.mode"> at least one of the following conditions is true
</label>

我有真假rule.mode.

在这个例子中,我使用了filter ng-repeat,但是如何在变量中使用它ng-if,例如:

{{languages.length | filter: {available: true}}}

和

ng-if="languages.length == 0 | filter: {available: true}"

见小提琴.

HTML

<div ng-controller="mainController">
    <div>There are {{languages.length}} languages in total.</div>
    <div>??? There are {{languages.length}} languages available.</div>
    <div ng-if="languages.length == 0">??? Sorry, there are no languages available.</div>

    <ol>
        <li ng-repeat="language in languages | filter: {available: true}">{{language.name}}</li>
    </ol>
</div>

AngularJS

$scope.languages = [
    {id:1, name:"German", available: false},    
    {id:2, name:"English", available: true},    
    {id:3, name:"French", available: false},  
    {id:4, name:"Italian", available: true},  
    {id:5, name:"Spanish", available: …

我试图理解ng-if和*ng-if之间的区别,但它们看起来和我一样.

是否存在差异,我应该记住选择一个而不是何时使用这些指令？

我试图了解ng-if和范围.据我所知,ng-if创建了一个新的子范围.这是我的问题:

视图

<input ng-model="someValue1" />
<div ng-if="!someCondition">
    <input ng-model="$parent.someValue2" />
</div>

调节器

$scope.someCondition = true;

if ($scope.someCondition) {
    $scope.someValue2 = $scope.someValue1;        
}

如果someCondition设置为true,则someValue2应与someValue1相同.

我的问题是我无法在两种情况下访问someValue2(true或false).我怎么能实现这个目标？