Question

我想引用来自角材料内置组件的html css中的类，例如，我在仪表板中有一个标头组件，现在在仪表板上它具有与整个网站相同的类，我有一个下拉菜单，在下拉菜单旁边，我有输入框，我在其中搜索值。现在我的问题是我想增加div的大小，在搜索意味着搜索结果div之后。

为便于说明，此处为图片

我希望仅在无法删除自动完成功能的情况下才能做到这一点，引导程序也可以正常工作

<form method="get" class="search_form">
   <select name="location" class="header-select" #supportsearchmodel>
      <option value="client">Clients</option>
      <option value="vendors">Vendors</option>
      <option value="task">Task</option>
      <option value="sale">Sales</option>
      <option value="support">Support</option>
      <option value="hr">HR</option>
      <option value="account">Accounting</option>
   </select>
   <input #supportsearch [matAutocomplete]="auto1" (keyup)="search()" type="text" placeholder="Search" class="mat-elevation-z3 header-search" (click)="close()">
   <mat-autocomplete #auto1="matAutocomplete">
      <div class="details" *ngIf="searchModel === 'support'">
         <div class="details" *ngIf="hideMsgTck">
            <h6 class="header_text"><strong>Tickets </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of halfTicketData" (click)="OnClickNavigateTicket(searchData.tickets_id)">
            <ul>
               {{searchData.ticket_code}} {{searchData.company_name}} {{searchData.company_email}} {{searchData.company_phone}} {{searchData.message}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'support'">
         <div class="details" *ngIf="hideMsgPro">
            <h6 class="header_text"><strong>Projects </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of halfProjectData" (click)="OnClickNavigateProject(searchData.project_id)">
            <ul>
               {{searchData.project_name}} {{searchData.description}} {{searchData.demo_url}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'support'">
         <div class="details" *ngIf="hideMsgBug">
            <h6 class="header_text"><strong>Bugs </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of bugsData" (click)="OnClickNavigateBugs(searchData.bug_id)">
            <ul>
               {{searchData.bug_description}} {{searchData.bug_status}} 
               {{searchData.bug_title}} {{searchData.notes}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'sale'">
         <div class="details" *ngIf="hideMsgLead">
            <h6 class="header_text"><strong>Lead </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of leadData" (click)="OnClickNavigateLead(searchData.leads_id)">
            <ul>
               {{searchData.contact_name}} {{searchData.email}} {{searchData.phone}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'sale'">
         <div class="details" *ngIf="hideMsgEst">
            <h6 class="header_text"><strong>Estimate </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of estimateData" (click)="OnClickNavigateEstimate(searchData.estimates_id)">
            <ul>
               {{searchData.first_name}} {{searchData.last_name}} {{searchData.notes}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'sale'">
         <div class="details" *ngIf="hideMsgOppo">
            <h6 class="header_text"><strong>Opportunity </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of oppoData" (click)="OnClickNavigateOppo(searchData.opportunities_id)">
            <ul>
               {{searchData.opportunity_name}} {{searchData.name}} {{searchData.notes}} {{searchData.probability}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'task'">
         <div class="details" *ngIf="hideMsgTask">
            <h6 class="header_text"><strong>Tasks </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of taskData" (click)="OnClickNavigateTask(searchData.task_id)">
            <ul>
               {{searchData.task_name}} {{searchData.task_description}} {{searchData.tasks_notes}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'client'">
         <div class="details" *ngIf="hideMsgClient">
            <h6 class="header_text"><strong>Clients</strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of clientData" (click)="OnClickNavigateClient(searchData.client_id)">
            <ul>
               {{searchData.name}} {{searchData.email}} {{searchData.website}} {{searchData.phone}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'vendors'">
         <div class="details" *ngIf="hideMsgVendor">
            <h6 class="header_text"><strong>Vendors </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of vendorData" (click)="OnClickNavigateVendor(searchData.vendor_id)">
            <ul>
               {{searchData.name}} {{searchData.email}} {{searchData.short_note}} {{searchData.phone}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'account'">
         <div class="details" *ngIf="hideMsgInvoce">
            <mat-option class="search_result" *ngFor="let searchData of invoiceData" (click)="OnClickNavigateInvoice(searchData.invoices_id)">
            <ul>
               {{searchData.memo}} {{searchData.currency}} {{searchData.notes}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'account'">
         <div class="details" *ngIf="hideMsgOrd">
            <h6 class="header_text"><strong>Purchase Order </strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of purchaseOrderData" (click)="OnClickNavigateOrd(searchData.purchase_order_id)">
            <ul>
               {{searchData.notes}} {{searchData.memo}} {{searchData.status}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="searchModel === 'account'">
         <div class="details" *ngIf="hideMsgPay">
            <h6 class="header_text"><strong>Payment</strong></h6>
            <mat-option class="search_result" *ngFor="let searchData of paymentData" (click)="OnClickNavigatePay(searchData.payments_id)">
            <ul>
               {{searchData.message}} {{searchData.payer_email}} {{searchData.status}}
            </ul>
            </mat-option>
         </div>
      </div>
      <div class="details" *ngIf="showMsg">
         <mat-option class="search_result">
            No Search Result Found!
         </mat-option>
      </div>
   </mat-autocomplete>
   <button mat-icon-button (click)="toggleSearchBar = !toggleSearchBar" type="button">
      <mat-icon class="header-icon">search</mat-icon>
   </button>
</form>

有什么办法可以扩展角垫的自动完成功能吗？

0 个答案: