当存在某个字符串时，如何让 *ngIf 显示 div

Question

仍在尝试掌握 Angular。当存在某个字符串时，如何使用 *ngIf 指令仅显示到以下 div。更具体地说，我希望 div 显示短语“Que”何时出现在数据库表 TutorRequests 的“原因”数据库列中。

我尝试使用 indexOf() 方法，但我认为它没有正确实现。

<div class="col-sm-3">
 <div class="panel panel-default pre-scrollable pre-scrollable-3">
   <div class ="row">
     <h2>Tutor Request</h2>
       <div *ngIf="tutorRequests.reason.indexOf('Que')">
         <div *ngFor="let tutorRequest of tutorRequests;" style="margin 
                 bottom: 10px;">
          <h5>{{tutorRequest.tutor.firstName + " " + 
             tutorRequest.tutor.lastName}}</h5>
                <p>{{tutorRequest.request.reason}}</p>
           <button style="margin-top: 1px;" class="btn btn-warning btn-sm"                       
             (click)="rejectTutorRequest(tutorRequest.tutor.userID)">Unflag
           </button>
          </div>
         </div>
        </div>
          <div *ngIf="!tutorRequests|| tutorRequests.length == 0">Tutor 
                    Requests to show</div>
          </div>
        </div>
       </div>

我确信这是一个简单的解决方法，但我还是 Angular 的新手。

Answer 1

您可以使用includes 方法来检查字符串是否包含子字符串。

<div *ngIf="tutorRequests.reason.includes('Que')">

Answer 2

• ES2016 规范包括用于数组数据结构的includes() 方法。
• includes() 方法检查数组是否包含特定元素，并根据需要返回 true 或 false。
• includes 方法会找到 NaN 和 undefined，而 indexOf 方法不会。

所以你可以使用下面的代码

*ngIf="tutorRequests.reason.includes('Que')"

Answer 3

由于>是一个特殊的HTML字符，你需要使用一个HTML实体。

<div *ngIf="tutorRequests.reason.indexOf('Que') >= 0">

当然，如果你只需要知道字符串是否以“Que”开头，那么这样就可以了：

<div *ngIf="tutorRequests.reason.indexOf('Que') === 0">