Question

我的目标是最终进行设置，用户可以在查看目录时更改行数（spiritwoodart.com）。当我遇到问题时，我甚至没有超过摆弄的第一阶段。猜测它是一个根本的误解。无法找到帮助（即我的搜索很糟糕：＆＃34;为什么我不能在ngif语句中放置模板变量＆＃34;）。如果需要更多信息，请告诉我。感谢任何和所有的见解，甚至是我的新生的火焰。

所以，当我改变

这样：

            <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) % https://github.com/reagent-project/reagent/blob/master/docs/CreatingReagentComponents.md#form-2--a-function-returning-a-function === 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元素，不能像那样使用。

AngularJS中存在

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

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

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

如果值 falsy ，它将无法工作，因为嵌套组件不会被编译。支持虚假值的更通用的解决方法是自定义ngVar结构指令，如here所述。

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语句中模板变量的使用

2 个答案: