Question

我试图在通过ngfor指令

进行迭代时拆分字符串

这是我的代码

<ng-container *ngFor="let item of packageDetails;let i = index">
    <div  class="col-lg-3 col-md-4 col-sm-6 ic-customer-packageDiv" >
        <nb-card  class="package_card" [ngClass]="{'ic-customer-freePackageBody':item.packageType=='free','ic-customer-activePkg': item.id == activePackageId,'ic-customer-inactivePkg': item.id != activePackageId}" style="border-radius:unset">
            <nb-card-header class="form-group" [ngClass]="{'ic-customer-cardFreeHeader' : item.packageType=='free','ic-customer-cardHeader' : item.packageType!='free'}">                               
                <p class="ic-customer-packageTitle control-label" [class.ic-customer-freePackage]="item.packageType=='free'">{{item.name}}</p>          
            </nb-card-header>
            <nb-card-body>
                <form>
                    <div class="form-group ic-customer-packagePriceDiv">
                        <p class="ic-customer-packagePrice" *ngIf=" item.packageType != 'free'">$ {{item.cost}}/ YEAR</p>
                        <p class="ic-customer-packagePrice" *ngIf=" item.packageType == 'free'" [class.ic-customer-freePackage]="item.packageType=='free'">FREE!!!</p>
                    </div>
                    <div class="form-group">
                      <ng-template *ngFor="let descr of item.description | split">
                         <p class="ic-customer-packageDescription" [class.ic-customer-freePackage]="item.packageType=='free'">{{descr}}</p>
                      </ng-template>
                   </div>

管道文件代码是

import { Pipe,PipeTransform } from '@angular/core';
@Pipe({
    name:'split'
})

export class splitPipe implements PipeTransform {
    transform(value) {
        console.log(value.split('\n'));
        return value.split('\n');
    }
}

但它在html文件中没有显示任何内容。我在此代码中找不到任何问题

Answer 1

而不是尝试使用管道，在你的第二个* ngFor中调用组件ts文件中的一个函数来进行拆分。

<ng-template *ngFor="let descr of splitDescription(item.description)">
       <p class="ic-customer-packageDescription" [class.ic-customer-
               freePackage]="item.packageType=='free'">{{descr}}</p>
</ng-template>

在打字稿文件中：

splitDescription(theString: string) {
     return value.split('\n');
}

Answer 2

最后我找到了答案。这只是因为使用了ng-template。在上面的代码中，我只是定义了一个模板，但没有使用yet.so我用ng-container替换了ng-template，现在它完美地工作了。

迭代ngfor指令时，可以拆分字符串并以角度2

2 个答案: