不理解 *ngIf 语句中模板变量的使用

Question

my objective 是最终进行设置，用户可以在查看目录时更改行数 (spiritwoodart.com)。当我运行遇到问题时，我什至没有通过摆弄的第一阶段。猜测这是一个根本性的误解。找不到帮助（即我的搜索很糟糕："why cant i put a template variables in ngif statement"）。如果需要更多信息，请告诉我。感谢您提供任何和所有见解，甚至为我的新手火上浇油。

所以，当我改变

这个：

            <div *ngIf="(i+1) % n === 0"
                class="w-100"></div>

对此：

或者这个：

            <div #n='3' *ngIf="(i+1) % n === 0"
                class="w-100"></div>

甚至这样：

            <div *ngIf="(i+1) % {{3}} === 0"
                class="w-100"></div>

我收到如下所示的错误：

compiler.js:485 Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "3" ("
                        [cart]="cart"></product-card>
                </div>
                <div [ERROR ->]#n='3' *ngIf="(i+1) % n === 0"
                    class="w-100"></div>
            </ng-container>
"): ng:///AppModule/ProductsComponent.html@12:21

上下文模板：

<div class="row">
    <div class="col-3">
        <product-filter [category]="category"></product-filter>
    </div>
    <div class="col">
        <div class="row"
            *ngIf="cart$ | async as cart">
            <ng-container *ngFor="let p of filteredProducts; let i = index">
                <div class="col">
                    <product-card [product]="p"
                        [cart]="cart"></product-card>
                </div>
                <div *ngIf="(i+1) % 3 === 0"
                    class="w-100"></div>
            </ng-container>
        </div>
    </div>
</div>

上下文组件：

import { Cart } from './../models/cart';
import { CartService } from './../cart.service';
import { Product } from './../models/product';
import { ProductService } from './../product.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/switchMap';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  products: Product[] = [];
  filteredProducts: Product[] = [];
  category: string; // keep this field in this class in order to initialize it... then delegate it out
  cart$: Observable<Cart>;

  constructor(
    private route: ActivatedRoute,
    private productService: ProductService,
    private cartService: CartService
  ) {}

  async ngOnInit() {
    this.cart$ = await this.cartService.getCart();
    this.populateProducts();
  }

  private populateProducts() {
    this.productService
      .getAll()
      .switchMap(products => {
        this.products = products;
        return this.route.queryParamMap;
      })
      .subscribe(params => {
        this.category = params.get('category'); // initializing category field
        this.applyFilter();
      });
  }

  private applyFilter() {
    // setting the filtered products array
    this.filteredProducts = this.category
      ? this.products.filter(p => p.category === this.category)
      : this.products;
  }
}

Answer 1

# 是 template reference variable。它遵循 DOM 元素，不能那样使用。

ng-init 指令存在于 AngularJS 中并用于此目的，但它不存在于 Angular 中，主要是因为它容易被滥用。可以重新创建它，如 .

所示

解决方法是使用结构指令。 truthy 值的典型解决方法是 ngIf 结构指令：

<ng-container *ngIf="3; let n">
  <div *ngIf="(i+1) % n === 0">
    ...

如果值为falsy，则不会起作用，因为不会编译嵌套组件。支持虚假值的更通用的解决方法是自定义 ngVar 结构指令，如 .

所述

Answer 2

对于像我这样的新手，这是我现在根据 JB 的建议所做的... 谢谢 JB。我希望这对其他人有帮助。

只是一些变化...

模板：

<div class="row">
        <input #myInput (change)="changeColumnNumber(myInput.value)" type="number">
</div>

组件：

  n = 4;

完整上下文：

模板：

    <div class="row">
        <input #myInput (change)="changeColumnNumber(myInput.value)" type="number">
</div>

<div class="row">
    <div class="col-3">
        <product-filter [category]="category"></product-filter>
    </div>

    <div class="col">
        <div class="row"
            *ngIf="cart$ | async as cart">
            <ng-container *ngFor="let p of filteredProducts; let i = index">
                <div class="col">
                    <product-card [product]="p"
                        [cart]="cart"></product-card>
                </div>
                <div *ngIf="(i+1) % n === 0"
                    class="w-100"></div>
            </ng-container>
        </div>
    </div>
</div>

组件：

import { Cart } from './../models/cart';
import { CartService } from './../cart.service';
import { Product } from './../models/product';
import { ProductService } from './../product.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/switchMap';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  products: Product[] = [];
  filteredProducts: Product[] = [];
  category: string; // keep this field in this class in order to initialize it... then delegate it out
  cart$: Observable<Cart>;
  n = 4;


  constructor(
    private route: ActivatedRoute,
    private productService: ProductService,
    private cartService: CartService,

  ) {}

  async ngOnInit() {
    this.cart$ = await this.cartService.getCart();
    this.populateProducts();
  }

  private populateProducts() {
    this.productService
      .getAll()
      .switchMap(products => {
        this.products = products;
        return this.route.queryParamMap;
      })
      .subscribe(params => {
        this.category = params.get('category'); // initializing category field
        this.applyFilter();
      });
  }

  private applyFilter() {
    // setting the filtered products array
    this.filteredProducts = this.category
      ? this.products.filter(p => p.category === this.category)
      : this.products;
  }

  changeColumnNumber(value) {
    console.log(value);
    this.n = value;
    console.log(this.n);
  }
}

不理解 *ngIf 语句中模板变量的使用

Not understanding use of template variables in *ngIf statement

variables

typescript

angular-ng-if

angular