小编LDB*_*LDB的帖子

我正在尝试禁用链接，直到在 Angular 6 中进行 API 调用。我希望在返回 getSelectedDealer() API 之前禁用链接。

 <menu-link *ngIf="perms.has(perms.TOP_OFFERS) && _dealerPersistenceService.getSelectedDealer()"
           route="/dynamic-journeys/{{getDealerId()}}/vehicles">
    <menu-item><img src="/assets/menu-icons/top-offers.svg">Dynamic Journeys</menu-item>
</menu-link>

这是“a”标签组件和 CSS 的代码。

<a [routerLink]="route" routerLinkActive="active" class="menu-link" [class.disabled]="disabled ? true: null">
<ng-content select="menu-item"></ng-content>

a.disabled {
    pointer-events: none;
    cursor: default;
}

基本上我需要在 API 调用之前禁用“菜单链接”项并在之后启用。

我正在尝试使用实用程序函数来检测反应应用程序中登录页面上的浏览器和操作系统。这是我尝试导出到登录组件中的方法：

//utils/platform.js

function getOperatingSystem(window) {
  let operatingSystem = 'Not known';
  if (window.navigator.appVersion.indexOf('Win') !== -1) { operatingSystem = 'Windows OS'; }
  if (window.navigator.appVersion.indexOf('Mac') !== -1) { operatingSystem = 'MacOS'; }
  if (window.navigator.appVersion.indexOf('X11') !== -1) { operatingSystem = 'UNIX OS'; }
  if (window.navigator.appVersion.indexOf('Linux') !== -1) { operatingSystem = 'Linux OS'; }

  return operatingSystem;
}

function getBrowser(window) {
  let currentBrowser = 'Not known';
  if (window.navigator.userAgent.indexOf('Chrome') !== -1) { currentBrowser = 'Google Chrome'; }
  else if (window.navigator.userAgent.indexOf('Firefox') !== -1) { currentBrowser = 'Mozilla Firefox'; …

我正在尝试有条件地显示v-tooltip基于布尔值的 a 。这就是我目前所拥有的：

<div v-for="predefinedContentItem in getPredefinedContentCategoryItems(category.id)"
  :class="['category-item-content-wrapper', { 'not-clickable': isMainDialogClosed}]"
  v-tooltip.right="getPredefinedContentItemMessage(predefinedContentItem)"
  slot="content"
  :key="predefinedContentItem.id"
  @click="onPredefinedContentItemClick(predefinedContentItem, category.id)">

我不想动态显示不同的工具提示文本。我想确定是否显示实际的工具提示。我尝试了以下三元，但没有成功：

<div v-for="predefinedContentItem in getPredefinedContentCategoryItems(category.id)"
  :class="['category-item-content-wrapper', { 'not-clickable': isMainDialogClosed}]"
  v-tooltip.right="isAutomotive ? getPredefinedContentItemMessage(predefinedContentItem) : null";
  slot="content"
  :key="predefinedContentItem.id"
  @click="onPredefinedContentItemClick(predefinedContentItem, category.id)">

我正在努力通过Angular Material对用户进行身份验证。我目前正试图在确认密码与第一个输入的密码不匹配时显示正确的错误。

这是我的html：

 <mat-form-field hintLabel="Minimum 8 Characters" class="">
                            <mat-label>Password</mat-label>
                            <input 
                            matInput 
                            #input 
                            type="password"
                            formControlName="password">
                            <mat-hint align="end">{{input.value?.length || 0}}/8</mat-hint>
                        </mat-form-field>

                        <mat-form-field>
                            <mat-label>Confirm</mat-label>
                            <input 
                            matInput
                            required  
                            type="password"
                            #confirm
                            formControlName="confirmPassword">
                            <mat-error *ngIf="form.get('confirmPassword').invalid || confirmPasswordMismatch">Password does not match</mat-error>
                            </mat-form-field>

一旦用户将注意力集中在密码确认上并且不进行任何输入而没有进行聚焦，就会显示该错误。用户输入任何内容后，即使确认与密码不匹配，错误也会消失。

这是我的TS文件：

public get confirmPasswordMismatch() {
        return (this.form.get('password').dirty || this.form.get('confirmPassword').dirty) && this.form.hasError('confirmedDoesNotMatch');
    }

this.form = new FormGroup({
            userName: new FormControl(null, [Validators.required]),
            fullName: new FormControl(null, [Validators.required]),
            email: new FormControl(null, [Validators.required, Validators.pattern(this.EMAIL_REGEX)]),
            password: new FormControl(null),
            confirmPassword: new FormControl(null, ),
        }, (form: FormGroup) => passwordValidator.validate(form));

预期的效果是，当确认pw为空时，当用户将文本输入到pw输入中时显示错误，而当两个用户都有文本但确认与pw不匹配时显示错误。

我想在 Vuejs 中突出显示“@click”上的表格行。目前我在让它工作时遇到问题。

这是我的 html 模板，我将活动类绑定到布尔“isActive”。

<table
      class="paginatedTable-table hide-table">
      <thead class="paginatedTable-table-head">
        <tr :class="{active: isActive}" class="paginatedTable-table-head-row">
          <th
            v-for="(column, key) in columns"
            :key="key"
            :class="column.align"
            class="paginatedTable-table-head-row-header"
            @click="sortTable(column)">
            {{ column.label }}
            <i
              v-if="sortOptions.currentSortColumn === column.field"
              :class="sortOptions.sortAscending ? icons.up : icons.down"
              class="sort-icon" />
          </th>
        </tr>

我在数据函数中声明 isActive 并设置为 false。

data() {
    return {
      width: '100%',
      'marginLeft': '20px',
      rowClicked: false,
      filteredData: this.dataDetails,
      isActive: false,

我设置 isActive 为 true 的按钮单击功能

async selectRow(detail) {
      this.isActive = true;
      this.width = '72%';
      this.rowClicked = true;

这部分我不太确定。在这里，我在 Sass 中设置了 Css。

 tr:not(.filters):not(.pagination-row) …

我正在使用 Angular 材料并使用 Mat-Select。当用户进行选择时，我想抓取一个用户，该用户实际上是一个具有 Id 和 description 属性的对象。

<mat-form-field>
    <mat-select placeholder="Select User Type"  (selectionChange)="selectUserType(user)">
        <mat-option  *ngFor="let user of userTypeList" [value]="user.description">
            {{ user.description }}
        </mat-option>
    </mat-select>
</mat-form-field> 

当用户进行选择时，我在这里收到未定义的信息：

public selectUserType(userType: OxygenUserType) {
    console.log('selected');
    this.selectedUserType = userType;
    console.log(this.selectedUserType);
}

我也试过，(selectionChange)="selectUserType($event.value)"但这不会产生一个对象。我需要用户选择是一个看起来像这样的对象：

{id:1, description:Agent},
{id:2, description:Dealer}

这个对象基于这个接口

export interface OxygenUserType {
    id: number;
    description: string;
}

我正在尝试在对象数组上使用.map（）进行简单除法。但是，当零除以零时将返回NaN。如何检查此计算并返回数字0而不是NaN？

  mounted() {
        console.log(this.dataOverview);
       let newData = this.dataOverview.map((data) => { 
           return {
              conversationSource: data.conversationSource,
              Id: data.Id,
              answerableConversations: data.conversationCount,
              interactiveConversations: data.interactive,
              leads: data.sent,
              interactiveLeadConversations: ((data.sent / data.interactive) * 100).toFixed(0) 
            }
        })
        this.convertedData = newData;
        console.log(this.dataOverview);
    }

使用此方法，当data.sent和data.interactive均为零时，interactiveLeadConversations返回NaN。