小编asd*_*asd的帖子

当我将接口的任何属性设为可选时，将其成员分配给其他变量时出现如下错误

TS2322：键入“字符串| 未定义”不能分配给“字符串”类型。类型“未定义”不能分配给类型“字符串”。

interface Person {
  name?:string,
  age?:string,
  gender?:string,
  occupation?:string,
}

function getPerson(){
  let person = <Person>{name:"John"};
  return person;
}
let person: Person = getPerson();
let name1:string = person.name;//<<<Error here 

如何解决此错误？

给定一个HTML节点,你如何判断它是否带有官方HTML标签？

<h9 id="someNodeId">hello<h9>
let node = document.getElementById("someNodeId");

在上面的代码片段我想要h9的不是官方的html标签.如何使用JS以编程方式找到它？

编辑:最好在 O(1)

我在UI上有一个标记按钮，单击该按钮，任何用户选择都标记为红色。没问题 我通过实现document.execCommand("insertHTML")

但是我还有一个附加要求，如果创建的新选择是旧选择标记的交集，则旧选择的红色标记应该消失。

举个例子：

在下图中：此和测试已标记。现在，如果我选择他是TES从一开始，点击标记，旧标志的这个和测试应该离开，只有他是TES应标，因为有一个路口。

码：

const button = document.getElementById("button");

button.addEventListener('click', ()=>{
	const s = window.getSelection();
  const selectionStr = s.toString();
  document.execCommand("insertHTML", false, `<span class="bg-red">${selectionStr}<span>`);
})

.bg-red {  
background: red;
}

<div contenteditable="true">
 this is testing  this is testing  this is testing
</div>

<button id="button">mark</button>

我今天从模板开始。以下代码是我项目中的全部代码。文档说，如果 Component 修饰的成员@state()发生变化，组件将重新渲染。

对@State() 属性的任何更改都将导致再次调用组件渲染函数。

但即使是这个简单的事情也行不通。请建议。

import {Component, State} from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @State() name:string = 'john';

  changeName(){
    this.name = "Peter";
    console.log('inside changeName');
  }

  render() {
    return <div>
      <p>{this.name}</p>
      <button onClick={this.changeName}>click</button>
    </div>;
  }
}

当我单击该按钮时会inside changeName被记录，但name在视图中看不到任何更改。

以下是我目前对渲染的理解。如果我错了，请纠正我。

想象一下，我在登录页面后面设置了一个Angular 7应用程序仪表板。我将使用有角度的通用工具（或其他工具）来预渲染登录页面和仪表板页面（仅是带有加载程序的外壳），它们将与login/index.htmland 一起与我的其他应用程序一起使用dashboard/index.html。

如果用户转到/login或/dashboard页面，Nginx将检查cookie。如果cookie表示用户已登录，则将提供Nginx dashboard/index.html；否则，将提供Nginxlogin/index.html

以上正确吗？

另外，我有两个问题：

1. 如果有人不使用Nginx而仅使用S3怎么办？在没有cookie访问的情况下，他们将如何处理上述情况？

2. 如果有人去了未知路由器怎么办？说/not-found-route什么 如何使用预渲染显示404页面？

我想创建一个popover具有如下 api 的组件：

<button  popover [content]="popover_content" >popover test</button>

<ng-template #popover_content>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</ng-template>

我已经尝试了一定程度，请参阅stackblitz

问题是：

1. 内容出现在按钮内。我该如何避免呢？

2. 我希望内容给它一些 css 类，但是当我访问它时，我只得到一个注释节点。

      @Input() set content(val: TemplateRef<void>) {
        this.popoverContent = val;
        console.log(val.elementRef.nativeElement);//this is a comment node. WHY??
      }

我不知道如何解决以上两个问题。如果有人能提供建议那就太好了。

我希望除 last 之外的所有 flex 项目只占据它们的正常高度，最后一个 flex 项目占据 flexbox 的剩余高度（拉伸）。但我无法做到这一点。

以下是我一直在尝试的：

  .parent {
        display: flex;
        flex-wrap: wrap;
        /*align-content: start;*/
        border: 1px solid green;
        height: 50vh
    }

    .child-height-auto {
        align-self: start;
        border: 1px solid red;
        width: 100%;
    }

    .child-height-strech {
        align-self: stretch;
        border: 1px solid blue;
        width: 100%;
    }

<div class="parent">
    <div class="child-height-auto">I should occupy my normal height</div>
    <div class="child-height-auto">I should occupy my normal height</div>
    <div class="child-height-strech">I should occupy remaining height of the flexbox</div>
</div>

在我的项目中，我使用ngx-bootstrap 的对话框组件，它将您的对话框组件ng-template显示为您的模态。

ng-template由于许多原因，使用是有利的，最重要的是，如果ng-template生活在同一个组件中，则没有通信障碍（在模态和原始组件之间）。这样我就可以毫无问题地调用我的组件方法。例如，在下面的代码selectNextRow()中，我的表中的行会改变，因此selectedRow_Session下一行的数据将显示在模态上。

app.component.ts

/** display selectedRow_Session on modal */
<ng-template #sessionDetailTemplate>

      <app-session-detail-model
        [session]="selectedRow_Session"
        [bot]="bot"
        (selectNextRow)="selectNextRow()"
        (closeModel$)="modalRef.hide()"
        (selectPrevRow)="selectPrevRow()"
        [pageNumberOfCurrentRowSelected]="pageNumberOfCurrentRowSelected"
        [indexOfCurrentRowSelected]="indexOfCurrentRowSelected"
        [finalDfState]="selectedRow_Session.df_state"
        [sessionDataStore]="selectedRow_Session.data_store">
      </app-session-detail-model>

</ng-template>

在 Angular Material Dialogs 中，我只能找到可以使用 onlyComponent和 not with来创建模态的 API ng-template。

有没有办法做到这一点，有或没有对话框，使用 Angular Material？

如何过滤给定部分路径的对象？

举个例子。

let address  = {
  country :{
    name:'Japan',
    city:{
      name:'Tokyo',
      town: {
        name:'korushawa'
      }
    },
    code:'JP'
  },
  nearbyCountry:'Korea'
}

路径1：countr.cit

对于address，path1 将导致

{
  country :{
    city:{
      name:'Tokyo',
      town: {
        name:'korushawa'
      }
    }
  }
}

对于path2，我应该得到整个address对象，因为countr存在于country和nearbyCountry

{
  country :{
    name:'Japan',
    city:{
      name:'Tokyo',
      town: {
        name:'korushawa'
      }
    }
  },
  nearbyCountry:'Korea'
}

编辑：当给出确切的路径（例如：）时，我已经能够解决这个问题country.city。但是在部分路径上有困难。

我有一个事件发射器testEvent。testEvent有一个管道链，并在该链中引发错误。但我也在链中的两个地方发现了错误。尽管如此，我testEvent的自动取消订阅。

有人可以解释为什么吗？

闪电战

import { Component, EventEmitter } from '@angular/core';
import {map} from 'rxjs/operators';
import {catchError, switchMap} from 'rxjs/internal/operators';
import {forkJoin, of} from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  testEvent$ = new EventEmitter();
  ngOnInit(){
    this.testEvent$
    .pipe(
       map((x) => {
         alert();
         throw "error";
       },
       catchError((e)=>{
         console.log(e);
         return of(1);
       })
       )
     )
     .subscribe(null, (e)=>{
       console.log(e);
     })
  }

  test(){
    this.testEvent$.emit(''); //works only once
  }


}

我想显示一个简单的form（如下图所示），dropdown当icon单击an时。我查看了角形材料的组件列表，但找不到适合的组件。有菜单，但是在这种情况下不能使用。

有人知道我该怎么做到吗？

突击

在下面的代码中，this.form.valueChanges并this.form.get('name').valueChanges发出良好的声音。但是forkJoin，这些都不起作用。有人可以请教吗？

export class AppComponent  {
  name = 'Angular';
  form = this.formBuilder.group({
    name:'test'
  })
  constructor(private formBuilder: FormBuilder){

  }

  ngOnInit(){

    forkJoin(this.form.valueChanges, this.form.get('name').valueChanges)
    .subscribe(x=>alert(x))//NOT working

    this.form.valueChanges.subscribe((x)=>alert(JSON.stringify(x)));//fine 
    this.form.get('name').valueChanges.subscribe((x)=>alert(x))//fine 
  }
}