Read More less toggle 无法正常工作 angular 12

Question

嗨，我是 angular 的新手，我正在尝试使用 readmore less 功能，但它无法正常工作，我正在使用共享服务在收到数据后通过 API 获取数据正确地，我将它存储在我的 .ts 文件中的数组中，然后在我的 div 中使用 ngFor 我正在显示它。问题是我的阅读更多按钮无法正常工作，点击所有点击按钮都会点击谁能指导我哪里出了问题？

这是我的Html文件

<div class="row justify-content-center">
<div class="col-md-6" *ngFor = "let data of listOfJobs">
        <div class="card mb-60 custom-card " >
          <div class="card-header custm-header">
            <h2 class="custom-h2 text-capitalize">{{data.ReqTitle}}</h2>
            <hr class="custom-hr" >
          </div>
          <div class="card-body pt-0">
          <ul class="list-group list-group-flush custom-list mb-4">
            <li class="list-group-item"><i class="fas fa-regular fa-briefcase theme-color custom-i-tag"></i>{{data.MinExperience}}</li>
            <li class="list-group-item"><i class="fa fa-map-marker theme-color custom-i-tag"></i>{{data.Location}}</li>
            <li class="list-group-item"><i class="fa fa-solid fa-wallet theme-color custom-i-tag"></i>{{data.Salary}}</li>
            <li class="list-group-item"><i class="fa fa-graduation-cap theme-color custom-i-tag"></i>{{data.Education}}</li>
            <li class="list-group-item"><i class="fa fa-solid fa-industry theme-color custom-i-tag"></i>{{data.Industry}}</li>
            <li class="list-group-item"><i class="fa fa-user theme-color custom-i-tag"></i>{{data.Gender}}</li>
            <li class="list-group-item"><i class="fa fa-regular fa-business-time theme-color custom-i-tag"></i>{{data.JobType}}
            </li>
            <li class="list-group-item"><i class="fa fa-regular fa-users theme-color custom-i-tag"></i> {{data.NoofOpenings}}</li>
            <li class="list-group-item"><i class="fa fa-solid fa-flag theme-color custom-i-tag"></i>{{data.Nationality}}</li>
          </ul>
      
          <h6 class="card-subtitle mb-2 text-muted">Job-Description:</h6>
            <p class="card-text"  [ngClass]="{'limitTextHeight': isReadMore}" >{{data.PlainJD}}</p>
            <!-- <button (click)="data.visible = !data.visible">{{ data.visible ? 'Show less': 'Show More' }}</button> -->
            <a type="button" class="button custm-bttn text-capitalize   btn-custom" (click)="showText()">
              {{ isReadMore ? 'Read More': 'Read Less' }}
            </a>
            <!-- <a type="button" class="button custm-bttn text-capitalize   btn-custom" (click)="isReadMore[i]==!isReadMore[i]">
              {{ isReadMore[i] ? 'Read More': 'Read Less' }}
            </a> -->
              <a class="button custm-bttn  btn-custom" href="resume-form">Apply</a>
          </div>
        </div>
      </div>
</div>

这是我的 .ts 文件

export class CurrentJobsComponent implements OnInit, AfterViewInit {


  listOfJobs: any = [];
  listOfSalutation: any = [];

  //isReadMore :boolean[]=[];
  isReadMore= true;


  constructor(private _getActiveJobs: GetJobService) { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.getActiveJobsDetails();
  }

  getActiveJobsDetails() {
    this._getActiveJobs.getActiveJobs().subscribe(data => {
     
      this.listOfJobs = data.Data;
      console.log(this.listOfJobs);

    })
  }

  showText() {
    this.isReadMore = !this.isReadMore
 }

}

如上所示，这是我的代码，当我尝试单击特定的 readmore 按钮时，它会反映在所有按钮上，因为我猜是因为我的 for 循环...... 谁能指导一下！！

Answer 1

一个解决方案是在检索时向作业数组中的所有项目添加另一个属性，并使用它来控制它。

getActiveJobsDetails() {
  this._getActiveJobs.getActiveJobs().subscribe(data => {
      this.listOfJobs = data.Data;
      this.listOfJobs.forEach((job) => {
          job.expanded = true;
      });
  })
}

然后替换showText(),

toggleText(job) {
  job.expanded = !job.expanded
}

并相应地编辑 html。

<p class="card-text"  [ngClass]="{'limitTextHeight': !data.expanded}" >{{data.PlainJD}}</p>
<a type="button" class="button custm-bttn text-capitalize btn-custom" (click)="toggleText(data)">
    {{ !data.expanded ? 'Read More': 'Read Less' }}
</a>

Read More less toggle 无法正常工作 angular 12

Readmore less toogle not working properly angular 12

html

angular

angular12