帶多行字符串的AngularJS和JSON

Question

我已將數據整理到JSON文件中，該文件包含多行字符串，並以數組分隔。 像這樣：

[
    {
        "name": "1. Some Name",
        "id": "1",
        "description": [
            "Some long text 1 ",
            "Some long text 2 "
       ]
    },
    {
        "name": "2. Some Name",
        "id": "2",
        "description": [
            "Some long text 1 ",
            "Some long text 2 "
        ]
    }
]

然后在我看來，我想在描述中顯示文本：

<ion-view view-title="">
<ion-content>
    <div class="card">
        <div class="item item-text-wrap" 
             ng-repeat="rule in rules | filter: { id: whichid }">
            {{ rule.description }}
        </div>
    </div>
</ion-content>

我的輸出如下所示：

["Some long text 1","Some long text 2"]

如何刪除（或過濾）字符“ [”，“””和“，”？

或者，如果我使用ng-bind-html =“ rule.description”指令，則會得到：

Some long text 1 ,Some long text 2

基本上，這是很好的輸出，但是它們包含一個逗號“，”（在數組中）。

Answer 1

這樣嘗試

 <div class="item item-text-wrap" 
         ng-repeat="rule in rules | filter: { id: whichid }">
        <span ng-repeat="d in rule.description">{{ d }}</span>
    </div>

Answer 2

您也可以嘗試Array.join（）方法。

連結： Array.join（）

在您的情況下：{{rule.description.join（''）}}

Answer 3

這也給我帶來很多悲傷。 但是我用自定義管道解決了它。 對制作管道進行研究，但這將有助於：

管道/arraytextfix/arraytextfix.ts（管道文件）：

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

/**
 * Generated class for the ArraytextfixPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'arraytextfix',
})

export class ArraytextfixPipe implements PipeTransform {
  /**
   * This is a very important pipe, as it removes a joining
   * comma, as outlined on this page: https://stackoverflow.com/questions/39557436/angularjs-and-json-with-multiline-string
   */


  transform(value) { 
    value = value.join(' ');     
    return value
  } 
}

另一個重要的事情是將該管道文件添加到您需要在其中使用文件的模塊中。

例如：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProjectsPage } from './projects'; 
import { TranslateModule } from '@ngx-translate/core'; // For translations to work
import { ArraytextfixPipe } from "../../pipes/arraytextfix/arraytextfix" // ADD THIS

@NgModule({
  declarations: [
    ProjectsPage,
    ArraytextfixPipe // ADD THIS
  ],
  imports: [

    TranslateModule, // For translations to work
    IonicPageModule.forChild(ProjectsPage),
  ],
})
export class ProjectsPageModule {}

然后，（對我而言）您就可以以相似的方式使用所有數據，甚至還可以使用轉換管道：

  <p [innerHTML]="'PROJECTS.BODY' | translate | arraytextfix"></p>

這基本上是我的i18n / en.json數據供稿：

{
"PROJECTS": 
  {
    "HEADING": "Projects",
    "DESCRIPTION": "A default description",
    "BODY": ["bodytext line 1 <p>even has support for a paragraph</p>",
    "<p>Works well on line 2</p>",
    "line 3"]
  } 
}

希望對您有所幫助