时间戳

首页 > 解决方案 > 如何将逗号分隔的json数组放入来自ngFor的span标签中，角度为8

html - 如何将逗号分隔的json数组放入来自ngFor的span标签中，角度为8

问题描述

我有简单的对象数组。我将它们用于循环 ngFor。我可以渲染。但问题是 json 包含 Treatment":"OPD,MEDICINES"。所以我需要将那些逗号分隔的值迭代到 span 中并放入边界。这是下面的代码

home.component.html

<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="mb-3 text-right">
<input [(ngModel)]="searchText" autocomplete="off" class="col-md-3 searchinput" type="text" placeholder="Search.."/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-bordered expensetable">
    <thead>
      <tr>
        <th>Date</th>
        <th>Treatment</th>
        <th>Expenses</th>
      </tr>
    </thead>
    <tbody>
    <ng-container *ngIf="( getListData | filter:searchText) as result">
      <tr *ngFor="let item of result">
        <td>{{item.Date}}</td>
        <td>{{item.Treatment}}</td>
        <td>{{item.Expenses}}</td>
      </tr>
     <tr *ngIf="result.length === 0">
        <td colspan="3" class="text-center">No Data Found</td>      
      </tr>
      </ng-container>
    </tbody>
  </table>
  </div>
  </div>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  getListData: any;
  constructor(private commonserviceService: CommonserviceService) { }

  ngOnInit() {
      this.getHeroes();
  }
getHeroes(){
   this.commonserviceService.getData().subscribe(getListData =>{
          this.getListData = getListData;
          console.log(this.getListData);
      },
      (error) => {
      alert('No data');
      }
  );
}
}

公共服务.service.ts

import { Injectable } from '@angular/core';
import {Http,Headers} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class CommonserviceService {

  constructor(private http:Http) { }

  getData(){
      let url = "http://dummy.restapiexample.com/api/v1/employees";
      return this.http.get(url)
     .map(
     (res) =>{
    let resData = /*res;*/ [{"Date":"8/02/2020","Expenses":750,"Treatment":"OPD,MEDICINES"},{"Date":"15/02/2020","Expenses":2565,"Treatment":"OPD,MEDICINES,ULTRASOUND SCAN"}]
    console.log(resData);
    return  resData;

     }
     );
  }
}

标签： htmlangulartypescript

解决方案

尝试这个。

1) 在 ts 文件中创建一个函数。此函数将用逗号分割您的处理字符串。为此使用 javascript 本机函数拆分。这将返回一个数组。循环遍历此数组并创建所需的 html。

2) 用于[innerHtml]在表的 td 中赋值

.ts 文件

getTreatment(data) {
    let str = ''
    let arr = data.split(',');
    if (arr.length > 0) {
      for (let i = 0; i < arr.length; i++) {
        str += '<p>' + arr[i] + '</p>'
      }
    }
    return str
  }

.html

<table class="table" border="1px">
    <thead>
      <tr>
        <th>Date</th>
        <th>Treatment</th>
        <th>Expenses</th>
      </tr>
    </thead>
    <tbody>
    <ng-container>
      <tr *ngFor="let item of resData">
        <td>{{item.Date}}</td>
        <td [innerHtml]="getTreatment(item.Treatment)"></td>
        <td>{{item.Expenses}}</td>
      </tr>

      </ng-container>
    </tbody>
  </table>

工作链接

https://stackblitz.com/edit/angular-mwd3us

注意 : : 也可以使用管道完成。您可以使用管道尝试

推荐阅读