小编gfe*_*els的帖子

我创建了一个textarea组件，该组件在ngAfterViewInit（）方法中创建时会自动聚焦：

ngAfterViewInit() {
    if(this.text.length===0){
    this.theinput.setFocus();
    }
  }

它工作正常，行为完全符合我的预期。

我正在使用ElementRef来获取ion-textarea组件：

@ViewChild('name') theinput: ElementRef;


<ion-textarea #name rows="1" ></ion-textarea>

但是，在运行ionic serve和构建应用程序时，它无法构建并显示错误：

"Property 'setFocus' does not exist on type 'ElementRef'."

在this.theinput.setFocus()代码行中。

如果我注释掉这行代码，请构建应用程序，然后取消注释-一切都会按预期进行。但是，这不是一个好的解决方案。

对于这样的问题，是否有更好的解决方法？扩展ElementRef还是类似的东西？

我有一个带有复选框的表单，对于某些复选框，以下适用：

当复选框被选中并被点击并且某些语句为真时，复选框不应被取消选中，而是跳回选中状态。

这是当前的html：

<ion-item>
    <ion-label stacked  [innerHTML]="htmlString"></ion-label>
    <ion-checkbox (click)="checkboxClick($event)"></ion-checkbox>
  </ion-item>

这是当前的 .ts：

checkboxClick(e){
    var statement = true;

    if(statement){
    e.target.checked = true;
    }
  }

这是一个展示该问题的堆栈闪电战：https ://stackblitz.com/edit/ionic-tcxd55?file = pages%2Fhome%2Fhome.ts

我已经看过这个类似的问题没有成功.问题中提到的掠夺者似乎被打破了.

我试图从子组件的[(ngModel)]绑定更新父组件的属性.

这是子组件HTML:

<div class="elastic-textarea">
    <ion-input rows="1"  [value]="inputValue" [(ngModel)]="inputValue" (ngModelChange)="change($event)" ></ion-input>
    </div>

这是子组件TS:

import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';

@Component({
  selector: 'app-childinput',
  templateUrl: './childinput.component.html',
  styleUrls: ['./childinput.component.css']
})
export class ChildinputComponent  {
@Input() inputValue: string;
  @Output() emitInputValue = new EventEmitter();
  constructor() { }

change(newValue) {
    console.log('newvalue', newValue)
    this.inputValue = newValue;
    this.emitInputValue.emit(newValue);
  }
}

这就是我在父组件中使用子组件的方式:

<app-childinput [(inputValue)]="thevalue" ></app-childinput>
<p>The changed value should be reflected here: {{thevalue}}</p>

这是STACKBLITZ展示的问题.父组件是调用"home"的页面,子组件是名为"childinput"的组件.

我做错了什么,或者这在Angular中根本不可能？

我正在使用 Angular 表单，并且我想使用它们的内置更改检测在我的应用程序中实现一个功能。当用户单击按钮时，如果他/她对表单进行了任何更改，他/她应该只会看到一个对话框。

我有 changesMade 变量：

private changesMade: boolean;

这是我的形式的 TS 代码：

this.carForm = new FormGroup({
        name: new FormControl('', [
            Validators.required,
            Validators.pattern('[a-zA-Z ]*'),
            Validators.minLength(1),
            Validators.maxLength(10)
        ])});

这是我的表单的 HTML 代码：

<form [formGroup]="carForm">
        <ion-item>
          <ion-label  stacked>car name</ion-label>
          <ion-input type="text" [(ngModel)]="carname" formControlName="name"></ion-input>
        </ion-item>
</form>

这是我的模拟（目前）服务调用，在我设置了绑定到输入的 carname 的值后，我订阅了表单更改

setTimeout(()=>{
  this.carname = "BMW";
  this.carForm.valueChanges.subscribe(val => {
  this.changesMade = true;
    });
}, 44)

这里的问题是，即使我没有接触过表单，this.changesMade 也会被设置为 true。

注意：如果我在 ngAfterViewInit 中移动代码的 subscribe 部分，它仍然将 changesMade 设置为 true，即使我没有触摸输入：

  ngOnInit(){
    //simulated server call
    setTimeout(()=>{
      this.carname = "BMW";

    }, 44)
  }
      ngAfterViewInit(){ …

我刚刚开始为我的 Angular 项目编写单元测试，如果设置了语言，我在测试时遇到了一些问题。

这是我的 app.component.ts 的代码：

ngOnInit() {
    this.translateService.setDefaultLang('en');

    this.translateService.onLangChange.subscribe((langChangeEvent: LangChangeEvent) => {
        this.localStorageService.setItem(LocalStorageService.languageKey, langChangeEvent.lang);
    });
    this.translateService.use('en');  <---- The subscribe callback should be called
}

这是我的 app.component.spec.ts 的代码：

  describe('ngOnInit', () => {
    it('should set default language as en', () => {
      const translateService = fixture.debugElement.injector.get(TranslateService);
      spyOn(translateService, 'setDefaultLang');
      component.ngOnInit();
      expect(translateService.setDefaultLang).toHaveBeenCalledWith('en');
  }); <----- This part of test is successful



    it('should set new lang key to localStorageService on TranslateService.onLangChange observable emit', () => {
      const localStorageService = fixture.debugElement.injector.get(LocalStorageService);
      spyOn(localStorageService, 'setItem');
      component.ngOnInit();
      translateService.use('de');
      expect(localStorageService.setItem).toHaveBeenCalledWith(LocalStorageService.languageKey, …

假设我在提供者中有一个这样的函数：

getAll(): Observable<CarModel[]> {
    return this.http.get<CarModel[]>(this.carUrl);
}

在组件中，我有一个使用提供程序的此函数的函数：

getCars() {
        const that = this;
        this.carService.getAll().subscribe(function(cars) {
            that.factoryService.setCars(cars);
            this.unsubscribe();
        });
    }

是否可以将其替换为使用take运算符的函数以避免调用unsubscribe()？

getCars() {
        const that = this;
        this.carService.getAll().take(1).subscribe(function(cars) {
            that.factoryService.setCars(cars);
        });
    }

我想知道与 Angular 的 Httpclient 方法一起使用时是否会产生任何意外或不需要的行为？我从来没有见过像这样使用 Angular 的 Httpclient - 这就是我问的原因。

我正在使用 useState() 钩子，我发现我的应用程序有一个错误，因为设置值是异步的。所以如果我有这样的代码：

 const [data, setData] = useState([])
  useEffect(() => {
    const getData = async () => {
      const res = await fetchData()
      console.log(data); // []
      setData(res.data.hits);
      console.log(res.data.hits); // Array full of objects
      console.log(data); // Still []
    }
    getData()
  }, [fetchData]);

只有在实际设置新状态时，如何才能执行某些特定逻辑？

我有一个表格，我想在其中写下有关课程的一些信息，并通过打开对话框的“+”按钮添加参与者。这是我的表格：

<form novalidate (ngSubmit)="editMode ? saveCourse() : addCourse()" [formGroup]="userForm">
    <ion-item>
        <ion-label stacked>Name</ion-label>
        <ion-input type="text" [(ngModel)]="course.name" formControlName="name" ></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked>Language</ion-label>
        <ion-input type="text" [(ngModel)]="course.language" formControlName="language" ></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked>Participants</ion-label>
    </ion-item>
    <ion-item>
        <button  item-end class="back_button" (click)="openModal()">
            <ion-icon  ios="ios-add" md="md-add"></ion-icon>
        </button>
    </ion-item>
    <div padding-bottom>
        <button ion-button block outline color="primary" type="submit" >{{(editMode ? 'EDIT_COURSE':'ADD_COURSE') | translate}}</button>
    </div>
</form>

每当我单击调用“openModal()”的按钮时，也会调用表单的 ngSubmit 函数。有什么办法可以避免吗？

我正在构建一个应用程序，需要从标头中删除具有特定类的所有链接元素。我已经建立了一个在w3schools编辑器中遇到的问题的示例。

为了重现该问题，我在类头中添加了多个相同的链接，并添加了“ link-to-remove”类：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="link-to-remove">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="link-to-remove">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="link-to-remove">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="link-to-remove">

这是我用来删除链接的功能：

function removeLinks() {
  const head = document.getElementsByTagName('head')[0];
        const links = head.getElementsByClassName('link-to-remove');
        for(let i = 0; i < links.length; i++) {
            head.removeChild(links[i]);
        }
}

该函数具有删除所有链接元素的逻辑，但是每次仅删除一些。只有多次按下触发该功能的按钮后，所有链接才会被删除。（在示例中，当引导表格样式消失时，所有链接都被删除）

示例：https： //www.w3schools.com/code/tryit.asp？filename = G36L0TRX06V3

我需要在此功能中进行哪些更改，使其在首次触发时删除所有链接？

我的模板中有这个表格：

<form #heroForm="ngForm" (ngSubmit)="onSubmit()">

我将其添加为控制器中的 ViewChild：

@ViewChild('heroForm') heroForm: ElementRef;

当我访问它的“form”属性以查看它是否有效时，它显示 TypeScript 错误“属性“form”在“ElementRef”类型上不存在。”。

if(this.heroForm.form.valid){
  this.submitted = true;
}

我怎样才能摆脱这个错误？

Stackblitz 示例：https://stackblitz.com/edit/template-driven-form-demo-1tbb37 ?file=app%2Fuser-form%2Fuser-form.component.ts