如何从Angular 6中的另一个组件获取[（ngmodel）]

我正在寻找有管道的产品。管道在product.component.html中[（ngModel）]时工作，但在app.component.html中[（ngModel）]时不工作

product-find.pipe.ts：

import { Pipe, PipeTransform} from '@angular/core';
import { Product } from './product/product';

@Pipe({
  name: 'productFind'
})

export class ProductFindPipe implements PipeTransform {

  transform(value: Product[], filterText?: string): Product[] {
    filterText = filterText ? filterText.toLocaleLowerCase() : null;
    console.log(filterText);
    return filterText ? value.filter((x: Product) => x.productName.toLocaleLowerCase().indexOf(filterText) >= 0) : value;
  }

}

app.component.html：

...

<input [(ngModel)]="filterText" name="filterText" class="form-control" type="search" placeholder="Search" aria-label="Search">

...

<div>
  <input class="form-control" type="search" placeholder="Search" aria-label="Search">
</div>
<div>
  <ul class="list-group">
    <li *ngFor="let product of products |productFind:filterText" class="list-group-item">
      ...
    </li>
  </ul>
</div>

<app-product [filterText]="filterText"></app-product>

。。。
...

product.component.html：

...

<input [(ngModel)]="filterText" name="filterText" class="form-control" type="search" placeholder="Search" aria-label="Search">

...

<div>
  <input class="form-control" type="search" placeholder="Search" aria-label="Search">
</div>
<div>
  <ul class="list-group">
    <li *ngFor="let product of products |productFind:filterText" class="list-group-item">
      ...
    </li>
  </ul>
</div>

<app-product [filterText]="filterText"></app-product>

...

如何解决这个问题

---

谢谢。

您需要在product.component.ts文件中声明@Input decorator

在product.component.ts中：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: 'your-template-url-here
})
export class ProductComponent {

    @Input() filterText: any; 

        //rest of your code here
}

在product.component.html中

<div>
    <ul class="list-group">
       <li *ngFor="let product of products |productFind:filterText" class="list-group-item">
                        ...
        </li>
    </ul>
</div>

...

现在在您的app.component.html中，类似于：

<input [(ngModel)]="filterText" name="filterText" class="form-control" type="search" placeholder="Search" aria-label="Search">
<app-product [filterText]="filterText"><app-product>

---

希望这对你有用

您需要在product.component.ts文件中声明@Input decorator

在product.component.ts中：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-product',
  templateUrl: 'your-template-url-here
})
export class ProductComponent {

    @Input() filterText: any; 

        //rest of your code here
}

在product.component.html中

<div>
    <ul class="list-group">
       <li *ngFor="let product of products |productFind:filterText" class="list-group-item">
                        ...
        </li>
    </ul>
</div>

...

现在在您的app.component.html中，类似于：

<input [(ngModel)]="filterText" name="filterText" class="form-control" type="search" placeholder="Search" aria-label="Search">
<app-product [filterText]="filterText"><app-product>

---

希望这对你有用

解决问题的两种可能方法：

在product.component.ts中定义filterText，并在product.component.html中使用[（ngModel）]=“filterText”。从app.component中删除输入框

使用@Input将父组件（即app.component）的filterText变量传递给子product.component

app.component.html：

...

<input [(ngModel)]="filterText" name="filterText" class="form-control" type="search" placeholder="Search" aria-label="Search">

...

<div>
  <input class="form-control" type="search" placeholder="Search" aria-label="Search">
</div>
<div>
  <ul class="list-group">
    <li *ngFor="let product of products |productFind:filterText" class="list-group-item">
      ...
    </li>
  </ul>
</div>

<app-product [filterText]="filterText"></app-product>

---

解决问题的两种可能方法：

在product.component.ts中定义filterText，并在product.component.html中使用[（ngModel）]=“filterText”。从app.component中删除输入框

使用@Input将父组件（即app.component）的filterText变量传递给子product.component

app.component.html：

...

<input [(ngModel)]="filterText" name="filterText" class="form-control" type="search" placeholder="Search" aria-label="Search">

...

<div>
  <input class="form-control" type="search" placeholder="Search" aria-label="Search">
</div>
<div>
  <ul class="list-group">
    <li *ngFor="let product of products |productFind:filterText" class="list-group-item">
      ...
    </li>
  </ul>
</div>

<app-product [filterText]="filterText"></app-product>

---

是否在app.component.html中添加product.component.html选择器？还是独立页面？是的，我在app.component.html中添加了。您是否在app.component.html中添加product.component.html选择器？还是独立页面？是的，我在app.component.htmlThank you中添加了！！。这是成功的。非常感谢你的帮助谢谢你！！。这是成功的。非常感谢你的帮助