如何在角度8中使用for循环显示更多/更少隐藏显示更多文本

Question

我有一张表，其数据来自循环。当我的内容文本超过10个字符时，将自动出现``显示更多''链接，并减少文本长度。再次单击``显示更多''文本应再次扩展到所有/剩余字符，并增加``隐藏较少''链接。如果我再次单击“隐藏较少”，则返回到较早的位置。展开/折叠应单独起作用。这是下面的代码

home.component.html

<table>
<tr *ngFor="let items of statusdata"><td>{{items.groupname}} <span>Show more..</span></td></tr>
</table>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
declare var $: any;
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  statusdata: any;


  ngOnInit() {

      this.statusdata = [{"groupid":1,"groupname":"project1project1project1project1project1project1project1project1project1"},{"groupid":2,"groupname":"project2project1project1project1project1project1project1project1"},{"groupid":3,"groupname":"project3project1project1project1project1project1project1project1project1project1"}];

  }


}

Answer 1

尝试这样：

.html

<link href="{{ url('theme/css/sb-admin-2.min.css') }}" rel="stylesheet">

.ts

<table>
    <tr *ngFor="let items of statusdata">
        <td>
            <span *ngIf="!items.showMore">   {{trimString(items.groupname,10)}}</span>
            <span  *ngIf="items.showMore">  {{items.groupname}} </span>
            <div *ngIf="items.groupname.length> 10" (click)="items.showMore = !items.showMore">Show
                <span>{{items.showMore ? 'less' : 'More'}}</span>
            </div>
        </td>
    </tr>
</table>

Working Demo