当我在角度2中使用[（ngmodel）]和[rating]时不显示组件 [英] Not show component when I used [(ngmodel)] and [rating] in angular 2

问题描述

i used angular 2 in asp mvc 5

 when i used this code for tow way-binding my component is not show any thing and it       not show me any error 

<pre lang="Javascript"><pre><input type='text' class="form-control" [(ngModel)]="listFilter" 
[ngModelOptions]="{standalone: true}" />

和此代码存在同样的问题：

and this code is same problem :

<ai-star [rating]='product.starRating'
           (ratingClicked)='onRatingClicked($event)'>
    </ai-star>

这是什么问题？



我该怎么办？从

whats the problem ?

how can i solve this problem ?

 import { Component } from '@angular/core';
import { IProduct } from './Product';
import { ProductFilterPipe } from './product-filter.pipe';
@Component({
    selector: 'pm-products',
    templateUrl: 'app/Product/product-list.component.html',
    pipes: [ProductFilterPipe]
})
export class ProductListComponent {
    pageTitle: string = 'Product List';
    imageWidth: number = 50;
    imageMargin: number = 2;
    listFilter: string = 'cart';
    ShowImage: boolean = false;
    products: IProduct[] = [
        {
            productId: 2,
            productName: "Garden Cart",
            productCode: "GDN-0023",
            releaseDate: "March 18, 2016",
            price: 32.99,
            description: "15 gallon capacity rolling garden cart",
            starRating: 4.2,
            imageUrl: "app/assets/images/garden_cart.png"
        },
        {
            productId: 5,
            productName: "Hammer",
            productCode: "TBX-0048",
            releaseDate: "May 21, 2016",
            description: "Curved claw steel hammer",
            price: 8.9,
            starRating: 4.8,
            imageUrl: "app/assets/images/rejon_Hammer.png"
        }
    ];
    toggleImage(): void {
        this.ShowImage = !this.ShowImage;
    }
}

Html代码：

Html Code :

<div class='panel panel-default'>
<div class='panel-heading'>
    {{pageTitle}}
</div>
<div class='panel-body'>
    <div class='row'>
        <div class='col-md-2'>Filter by:</div>
        <div class='col-md-4 form-group'>
            <input type='text' class="form-control" [(ngModel)]="listFilter" [ngModelOptions]="{standalone: true}" />
        </div>
    </div>
    <div class='row'>
        <div class='col-md-6'>
            <h3>Filtered by: </h3>
        </div>
    </div>
    <div class='table-responsive'>
        <table class='table' *ngIf='products && products.length'>
            <thead>
                <tr>
                    <th>
                        <button class='btn btn-primary' (click)='toggleImage()'>
                            {{ShowImage ? 'Hide' : 'Show'}} Image
                        </button>
                    </th>
                    <th>Product</th>
                    <th>Code</th>
                    <th>Available</th>
                    <th>Price</th>
                    <th>5 Star Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor='#product of products '>
                    <td>
                        <img *ngIf='ShowImage'

                             [src]='product.imageUrl'

                             [title]='product.productName'

                             [style.width.px]='imageWidth'

                             [style.margin.px]='imageMargin' />
                    </td>
                    <td>{{ product.productName }}</td>
                    <td>{{ product.productCode }}</td>
                    <td>{{ product.releaseDate }}</td>
                    <td>{{ product.price }}</td>
                    <td>
                        <ai-star [rating]='product.starRating'

                                 (ratingClicked)='onRatingClicked($event)'>
                        </ai-star>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

ProductFilterPip：

ProductFilterPip :

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

@Pipe({
    name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
    transform(value: IProduct[], args: string): IProduct[] {
        let filter: string = args[0] ? args[0].toLocaleLowerCase() : null;
        return filter ? value.filter((product: IProduct) => product.productName.toLocaleLowerCase().indexOf(filter) != -1) : value;
    }
}

我的尝试：



这个问题是什么？我怎样才能解决这个问题？

What I have tried:

whats the problem ? how can i solve this problem ?

推荐答案

event）'>
< / ai-star >

event)'> </ai-star>

这是什么问题？



我该怎么办？从

whats the problem ?

how can i solve this problem ?

 import { Component } from '@angular/core';
import { IProduct } from './Product';
import { ProductFilterPipe } from './product-filter.pipe';
@Component({
    selector: 'pm-products',
    templateUrl: 'app/Product/product-list.component.html',
    pipes: [ProductFilterPipe]
})
export class ProductListComponent {
    pageTitle: string = 'Product List';
    imageWidth: number = 50;
    imageMargin: number = 2;
    listFilter: string = 'cart';
    ShowImage: boolean = false;
    products: IProduct[] = [
        {
            productId: 2,
            productName: "Garden Cart",
            productCode: "GDN-0023",
            releaseDate: "March 18, 2016",
            price: 32.99,
            description: "15 gallon capacity rolling garden cart",
            starRating: 4.2,
            imageUrl: "app/assets/images/garden_cart.png"
        },
        {
            productId: 5,
            productName: "Hammer",
            productCode: "TBX-0048",
            releaseDate: "May 21, 2016",
            description: "Curved claw steel hammer",
            price: 8.9,
            starRating: 4.8,
            imageUrl: "app/assets/images/rejon_Hammer.png"
        }
    ];
    toggleImage(): void {
        this.ShowImage = !this.ShowImage;
    }
}

Html代码：

Html Code :

<div class='panel panel-default'>
<div class='panel-heading'>
    {{pageTitle}}
</div>
<div class='panel-body'>
    <div class='row'>
        <div class='col-md-2'>Filter by:</div>
        <div class='col-md-4 form-group'>
            <input type='text' class="form-control" [(ngModel)]="listFilter" [ngModelOptions]="{standalone: true}" />
        </div>
    </div>
    <div class='row'>
        <div class='col-md-6'>
            <h3>Filtered by: </h3>
        </div>
    </div>
    <div class='table-responsive'>
        <table class='table' *ngIf='products && products.length'>
            <thead>
                <tr>
                    <th>
                        <button class='btn btn-primary' (click)='toggleImage()'>
                            {{ShowImage ? 'Hide' : 'Show'}} Image
                        </button>
                    </th>
                    <th>Product</th>
                    <th>Code</th>
                    <th>Available</th>
                    <th>Price</th>
                    <th>5 Star Rating</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor='#product of products '>
                    <td>
                        <img *ngIf='ShowImage'

                             [src]='product.imageUrl'

                             [title]='product.productName'

                             [style.width.px]='imageWidth'

                             [style.margin.px]='imageMargin' />
                    </td>
                    <td>{{ product.productName }}</td>
                    <td>{{ product.productCode }}</td>
                    <td>{{ product.releaseDate }}</td>
                    <td>{{ product.price }}</td>
                    <td>
                        <ai-star [rating]='product.starRating'

                                 (ratingClicked)='onRatingClicked(

event)'>
</ai-star>
</td>
</tr>
</tbod y>
</table>
</div>
</div>

event)'> </ai-star> </td> </tr> </tbody> </table> </div> </div>

ProductFilterPip :

ProductFilterPip :

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

@Pipe({
    name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {
    transform(value: IProduct[], args: string): IProduct[] {
        let filter: string = args[0] ? args[0].toLocaleLowerCase() : null;
        return filter ? value.filter((product: IProduct) => product.productName.toLocaleLowerCase().indexOf(filter) != -1) : value;
    }
}

What I have tried:



whats the problem ? how can i solve this problem ?

What I have tried:

whats the problem ? how can i solve this problem ?

这篇关于当我在角度2中使用[（ngmodel）]和[rating]时不显示组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！