小编cup*_*_of的帖子

在mat-select中设置默认选项

我的Angular材料项目中有一个简单的选择表单字段:

component.html

  <mat-form-field>
    <mat-select [(value)]="modeSelect" placeholder="Mode">
      <mat-option value="domain">Domain</mat-option>
      <mat-option value="exact">Exact</mat-option>
    </mat-select>
  </mat-form-field>
Run Code Online (Sandbox Code Playgroud)

[(value)]="modeSelect"被绑定到modeSelect财产在component.ts文件

我想这样做,所以<mat-option value="domain">Domain</mat-option>在页面加载时默认选择.

ng-selected 不适合我

angular-material angular

25
推荐指数
5
解决办法
4万
查看次数

在深层嵌套对象中按特定键查找所有值

如何在深层嵌套对象中按特定键查找所有值?

例如,如果我有一个这样的对象:

const myObj = {
  id: 1,
  children: [
    {
      id: 2,
      children: [
        {
          id: 3
        }
      ]
    },
    {
      id: 4,
      children: [
        {
          id: 5,
          children: [
            {
              id: 6,
              children: [
                {
                  id: 7,
                }
              ]
            }
          ]
        }
      ]
    },
  ]
}
Run Code Online (Sandbox Code Playgroud)

我将如何通过id.

注意:children是一个一致的名称,并且id's 不会存在于children对象之外。

所以从 obj 中,我想生成一个这样的数组:

const idArray = [1, 2, 3, 4, 5, 6, 7]
Run Code Online (Sandbox Code Playgroud)

javascript arrays function object ecmascript-6

13
推荐指数
5
解决办法
2万
查看次数

Angular 2+等待订阅完成更新/访问变量

您好,我的变量未定义存在问题。我确定这是因为可观察的匆忙还没有完成。这是导致问题的我的.ts文件中的代码部分:(如果需要提供更多代码和上下文,我会放置理解该问题所需的最少代码。请myFunction从html中的click事件。)

export class myClass {
  myVariable: any;

  myFunction() {
    this.myService.getApi().subscribe(data => {
      this.myVariable = data;
    });

    console.log(myVariable) --> undefined
  }
}
Run Code Online (Sandbox Code Playgroud)

因此,这段代码在我的服务中调用了一个函数,该函数从api返回一些数据。问题是,当我尝试myVariable在订阅函数外部访问变量时,它返回未定义的值。我确定这是因为在我尝试访问之前订阅尚未完成myVariable

在尝试访问之前,有没有办法等待订阅完成myVariable

谢谢!

subscribe observable angular

9
推荐指数
2
解决办法
2万
查看次数

奇异变化检测行为Angular 2+

您好我正在开发一个大型应用程序,我遇到了一些变更检测问题.我将尝试尽可能地解释我的设置.

父组件ts:

运用 changeDetection: ChangeDetectionStrategy.OnPush

我有一个可观察的变量

loaderOverlay$: Observable<boolean>;

this.loaderOverlay$ = this.store.pipe(
  select(selectors.loaderOverlaySelector)
);
Run Code Online (Sandbox Code Playgroud)

此变量从子组件的rxjs操作更新.然后通过rxjs进程.(动作 - >减速器 - >选择器)

父组件HTML

<div *ngif="(loaderOverlay$ | async)"></div>

孩子#1组件(我发送我的动作):

myFunction() {
  this.store.dispatch(new actions.LoaderOverlay(true));
}
Run Code Online (Sandbox Code Playgroud)

我的问题是,一旦我发出动作,*ngif就会非常不稳定.它似乎没有按照我想要的方式工作(调度操作,将值更改为true以便显示div).这很奇怪,因为如果我console.log(action.payload)在reducer中,该值实际上正在更新,但*ngif它不起作用.甚至更奇怪的是,当我将鼠标悬停在其他组件上时,它似乎开始了.

我花了很多时间在这上面,我想我已经缩小了它以改变检测,因为在父组件中如果我这样做:

ngAfterViewChecked(){
   this.changeDetector.detectChanges();
}
Run Code Online (Sandbox Code Playgroud)

它似乎对我有用.我的问题是,ngAfterViewChecked似乎被触发了很多次,我害怕性能问题.

以前有没有人遇到过这个问题?或者有没有人对于发生了什么以及我可以做些什么来解决这个奇怪的问题?

谢谢!

angular ngrx-store

9
推荐指数
2
解决办法
369
查看次数

将一个伪:after元素放在列表项的右侧

我试图将一个伪:after元素定位在菜单列表项右侧30像素.

无论项目文本的长度如何,我都希望元素向右移动30px.

我已将以下代码剥离到我认为此问题所需的最低限度.

请注意,这是一个移动菜单.菜单和a标签链接扩展了浏览器(手机)的整个宽度.

#menu-main-menu-1 li {
  position: relative;
  list-style: none;
}
#menu-main-menu-1 li a {
  padding: 18px 0;
  display: block;
  text-align: center;
}
#menu-main-menu-1 a:after {
  content: "\25CF";
  position: absolute;
  right: 0;
  left: 150px;
  top: 20px;
}
Run Code Online (Sandbox Code Playgroud)
<ul id="menu-main-menu-1">
  <li class="menu-item">
    <a href="#">Menu Item</a>
  </li>
  <li class="menu-item">
    <a href="#">Long Menu Item Text</a>
  </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

上面的代码产生以下结果:

在此输入图像描述

正如您所看到的,我需要将其放置在左侧150px处,以使元素在项目的右侧移动30px.它可以工作,但我可以预见一个问题,如果菜单项有很多文本,它将超过150px,元素将在文本中.例如:

在此输入图像描述

无论长度如何,我都需要元素在文本的右边30px.所以它看起来像:

在此输入图像描述

这是JSFiddle链接: JSFiddle

请注意,我已经删除了许多不影响此问题功能的不必要的样式(颜色,字体等)

任何帮助将非常感激!

谢谢

html css css-position css3 flexbox

7
推荐指数
2
解决办法
1696
查看次数

将光标置于焦点输入字段值的末尾 | 角2

我正在创建一个动态组件,并ngAfterViewInit完成了以下代码:

setTimeout(() => {
  this.input.nativeElement.focus();
}, 0);
Run Code Online (Sandbox Code Playgroud)

这是有效的:它正确地将焦点设置在输入上,但光标放置在值的开头。我想将光标放在值的末尾。

我试过这个:

setTimeout(() => {
  this.input.nativeElement.focus();
  let start = this.input.nativeElement.selectionStart;
  let end = this.input.nativeElement.selectionEnd;
  this.input.nativeElement.setSelectionRange(start,end);
}, 0);
Run Code Online (Sandbox Code Playgroud)

我也尝试过清除该值并重置它,但无法让它工作。

这是 html 以及我如何访问它:

<input class="nav-editor__input" #input type="text">

@ViewChild('input') input: ElementRef;
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?

typescript angular

6
推荐指数
1
解决办法
1万
查看次数

将 CSS 过渡和动画结合在一起?

您好,我在将 css 过渡和动画组合在一起时遇到问题。动画正在工作,但由于某种原因,当我添加过渡时,过渡有效,但取消了动画。有人知道如何将它们结合起来吗?

这是我的CSS:

.circle-spin {
    transition: all 1s ease;
}

.circle-spin-reverse {
    transition: all 1s ease;
}

.success li:hover .circle-spin-reverse {
    animation:spin-reverse 10s linear infinite;
    /* the above works until i add the transition below */

    transform:scale(1.25);
}

.success li:hover .circle-spin {
    animation:spin 10s linear infinite;
    /* the above works until i add the transition below */

    transform:scale(1.25);
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@keyframes spin-reverse { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } } …
Run Code Online (Sandbox Code Playgroud)

css animation css-animations

5
推荐指数
1
解决办法
5703
查看次数

使用CSS文本外部发光效果

我需要使用CSS为某些文本添加"外部发光"Photoshop效果.这是我试图实现的模型的屏幕截图:

在此输入图像描述

这是Photoshop图层设置:

在此输入图像描述

我很确定这是,text-shadow但我一直在搞乱它,我无法在各方面发光.

html css

5
推荐指数
3
解决办法
3万
查看次数

使用循环在 HTML 中显示来自 jQuery.ajax 的 json 数据

您好,假设我有以下 ajax 调用:

jQuery.ajax({
    type: "GET",
    url: "https://myurl.com",
    success: function(data)
    {
        console.log(data);
    }
});
Run Code Online (Sandbox Code Playgroud)

这导致以下 json 数据(在我的控制台中)

{
  "meta": {
    "last_updated": "2017-07-06"
  },
  "results": [
    {
      "term": "DRUG INEFFECTIVE",
      "count": 1569
    },
    {
      "term": "NAUSEA",
      "count": 1374
    },
    {
      "term": "FATIGUE",
      "count": 1371
    }
  ]
}
Run Code Online (Sandbox Code Playgroud)

如何div在我的 HTML 页面中以如下格式使用此数据填充 a :

term: x
count: xx

term: x
count: xx

term: x
count: xx
Run Code Online (Sandbox Code Playgroud)

我对“元”的东西不感兴趣,只对“结果”感兴趣

有人知道如何使用简单的循环来显示这些数据吗?

谢谢!

html ajax jquery json

5
推荐指数
1
解决办法
1万
查看次数

在 JavaScript 中搜索对象的嵌套数组并返回完整的父对象作为结果

我已经成功编写了一个递归函数来循环嵌套对象并查找结果。但如果它的孩子通过了测试,我很难添加整个父级。我有以下代码:

const myObj = [
  {
    name: '1',
    pages: [
      {
        name: '1.1',
        pages: []
      },
      {
        name: '1.2',
        pages: []
      },
    ]
  },
  {
    name: '2',
    pages: []
  },
  {
    name: '3',
    pages: []
  }
]

function searchPages(searchQuery, obj) {
  let searchResults = [];
  for (let i = 0; i < obj.length; i++) {
    let item = searchString(obj[i], searchQuery);

    if (item) {
      searchResults.push(item);
    }
  }
  return searchResults;
}

function searchString(obj, string) {
  if (obj.name.includes(string)) {
    return obj;
  }

  for …
Run Code Online (Sandbox Code Playgroud)

javascript

5
推荐指数
1
解决办法
2949
查看次数