angular技巧

2021-11-29 01:00:06 阅读：155 来源： 互联网

标签：console log Two 技巧 pipe News angular const

withLatestFrom

将源 Observable 与其他 Observable 组合以创建一个 Observable，其值从每个 Observable 的最新值计算，仅当源发出时。

拿到最新的值进行合并

 const sportsNews$ = interval(5000).pipe(
      map(i => `One News ${i}`)
    );

    const worldNews$ = interval(1000).pipe(
      map(i => `Two News ${i}`),
      // tap((v) => console.log(v))
    );
    const customizedNews$ = sportsNews$.pipe(
      withLatestFrom(worldNews$),
      map(([sportNews, worldNews]) => `One: ${sportNews}; Two: ${worldNews}`),
      take(3)
    );
    customizedNews$.subscribe(console.log);

// One: One News 0; Two: Two News 4
// One: One News 1; Two: Two News 9
// One: One News 2; Two: Two News 14

sample

如果不用上面那种方式

  const news$ = interval(1000).pipe(
      map(i => `News ${i}`)
    );

    const latestNews$ = news$.pipe(
      sample(interval(5000)),// 每5s拿到最新的值
      take(3)
    );

    latestNews$.subscribe(console.log);

禁用当前选中

<mat-form-field>
  <mat-select
    [(ngModel)]="selectedBrands"
    [ngModelOptions]="{ standalone: true }"        
    required multiple
  >
    <mat-option
      *ngFor="let brand of brands"
      [value]="brand"
      [disabled]="selectedBrands.indexOf(brand) > -1"
      >{{ brand.name }}
    </mat-option>
  </mat-select>
</mat-form-field>

任意时区的当前时区

// 获取当前时区
const num=- new Date().getTimezoneOffset() / 60;

const newDate=new Date(new Date().getTime()+num*60*60*1000).toISOString()

pluck

从具有多个属性的数组中提取单个属性。

 from([
      { brand: 'Apple', model: 'max 12 pro', price: '$10'},
      { brand: 'Nokia', model: 'X 10', price: '$50'}
    ]).pipe(pluck('model'))
      .subscribe(console.log)

// max 12 pro
// X 10

枚举的实际使用

export enum Test1 {
  num1 = 'left',
  num2 = 'right'
}

export class TimeSevenComponent implements OnInit, AfterViewInit {
  eye = Test1;
  ngOnInit(): void {
    console.log(this.eye);
  }
}

空值的使用

<h1 [ngClass]="null??'xxxx'">Hello World</h1>

angular早期的表单

<input type="text" [ngModel]="sexNum" #foo="ngModel" required (ngModelChange)="setChange($event,foo)">
{{foo.value}} {{foo.errors|json}}

 sexNum=''
 setChange($event: any, foo: NgModel) {
    console.log($event, foo);
  }

案例二

<form #f="ngForm">
  <input type="text" name="one" ngModel #foo="ngModel" required (ngModelChange)="setChange($event,foo)">
  {{f.value |json}}
</form>

 ngForm = {
    one: '',
    two: '',
  };

angular13

删除ng add包, 如果使用请使用yarn ng add

添加@angular/elements

angualr13别用webstrom20210203 还是有问题

typescript

export type TypeTwo='a'|'b'
export type TypeOne = 'c' | 'd';
export type TypeThree=`${TypeOne}我是谁${TypeTwo}`
  a: TypeThree = 'd我是谁a';

超时报错

模拟延迟请求
const obj = new BehaviorSubject('bbbb');
obj.pipe(delay(1000*4))
// 案例
 obj.pipe(delay(1000*4)).pipe(
      timeout(1000 * 4),
      catchError((error: any) => {
        return throwError('报错了')
      })
    ).subscribe(console.log);

输入框失去焦点清空两边空格的指令

@Directive({
  selector: '[tyFormBlur]'
})
export class FormBlurDirective implements OnInit {

  constructor(private elementRef: ElementRef, @Self() private ngControl: NgControl) {
  }

  ngOnInit(): void {
    // 失去焦点, 清空两边空格
    fromEvent(this.elementRef.nativeElement, 'blur').subscribe(() => {
      if (typeof this.ngControl.value === 'string') {
        const value = this.ngControl.value.trim();
        this.ngControl.control.patchValue(value);
      }
    })
  }
}

promise /observable 转化

   fromPromise(Promise.resolve('xxx')).subscribe(console.log)
    of(1).toPromise().then(console.log)

form表单

ngOnInit(): void {
    this.form = this.formBuilder.group({
      firstName: [{ value: 'Foo', disabled: true }, [Validators.required]],
      lastName: ['Bar']
    });
    this.lastName.disable();
  }

ng-template

<ul>
  <li *ngFor="let item of arr">
    <ng-container *ngTemplateOutlet="sex;context:item"></ng-container>
  </li>
</ul>
<ng-template #sex let-names>
  <h1>我是一个{{names}}</h1>
</ng-template>

  arr:Array<any>=[1,2,3]

标签：console,log,Two,技巧,pipe,News,angular,const
来源： https://www.cnblogs.com/fangdongdemao/p/15617338.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9