Question

这是我的html元素：

<ng-container>
    <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded">{{row.messageText.substr(0, 25)}}
        <span>more</span>
    </span>
</ng-container>

当row.messageText.length大于30时，它会显示消息的一部分。在点击后，我需要首先显示整个消息（通过使用 row.messageText.substr() ）更多跨度。我认为有一个解决方案是使用 (click)="toggle()" 并设置一些 true / false 值。

你有什么想法吗？

Answer 1

loadCaches

并在ts文件中最初设置expanded = false

Answer 2

你可以：

<ng-container>
    <div>
          <span *ngIf="row.messageText && row.messageText.length < 30">{{row.messageText}}</span>
          <span *ngIf="row.messageText && row.messageText.length >= 30 && !expanded">{{row.messageText.substr(0, 25)}}</span>
          <span *ngIf="row.messageText && row.messageText.length >= 30 && expanded">{{row.messageText.substr(0, 25)}}</span>
          <span (click)="toggle()">{{expanded?'less':'more'}}</span>
    </div>
</ng-container>

成分：

toggle(){
     this.expanded = !this.expanded;
}

Answer 3

正如您在问题中提到的，您可以使用点击事件将行传递给函数，如下所示

 <span (click)="enableSpan(row)">more</span>

然后在打字稿内。

enableSpan(row:any){
   row.expand = true;
}

并且相应的HTML将是

<span *ngIf="row.expand">{{row.messageText}}</span>

Answer 4

在TS文件中

showMyContainer: boolean = false;

在HTML 中

<button (click)="showMyContainer=!showMyContainer">Show/Hide</button>

<div *ngIf="showMyContainer">
     your code
</div>

查看我的 stackblitz

很高兴听到有人提供帮助。

Answer 5

你可以试试这种方式

<span *ngIf="row.messageText"> {{(row.messageText.length >= 30 && expanded == false)? row.messageText.substr(0, 25) : row.messageText}}
   <span style="color: blue;" *ngIf="row.messageText.length >= 30" (click)=" expanded = !expanded ">{{(!expanded)? 'more' : 'less'}}</span>
</span>

Answer 6

 <div class="top5" *ngFor="let feedback of topFeedbacks; index as i" >
      <ng-container>
        <div style="margin-left: 5%;">
              <span *ngIf="feedback && feedback.length < 80"><i class="fas fa-comment-dots"></i>&nbsp;&nbsp;{{feedback}}</span>
              <span *ngIf="feedback && feedback.length >= 80 && !expanded[i]"> <i class="fas fa-comment-dots"></i>&nbsp;&nbsp;{{feedback.substr(0, 75)}}</span>
              <span *ngIf="feedback && feedback.length >= 80 && expanded[i]"><i class="fas fa-comment-dots"></i>&nbsp;&nbsp;{{feedback.substr(0, feedback.length)}}</span> 
              <label>&nbsp;</label>
              <a  *ngIf="feedback && feedback.length >= 80" class="toggle-button" (click)="toggle(i)">{{expanded[i]?' ...Show less':' ...Show more'}}</a>
        </div>
    </ng-container>
</d
iv>

Answer 7

我找到了一个相当简单的方法来解决这个问题。在我的示例中，我只是用它来显示，但显然可以使用相同的方法进行切换或其他任何操作。

我喜欢这个解决方案，因为它都是有效的，而且都是模板:)

<ng-container>
    <div data-expand="false" #expandWrap>
        <span *ngIf="row.messageText && row.messageText.length >= 30 && expandWrap.dataset.show == 'false'">{{row.messageText.substr(0, 25)}}
            <span (click)="expandWrap.dataset.show = 'true'">more</span>
        </span>
        <span *ngIf="expandWrap.dataset.show == 'true'">{{row.messageText}}</span>
    </div>
</ng-container>

我做了 a small demo on stackblitz 关于它是如何工作的

如何在Angular 4中切换（显示/隐藏）元素？

7 个答案: