如何获得Angular 13中的自定义属性值

Question

我有这样的下拉列表，我需要在按钮上获得值。但是它总是返回零。需要获取CUS_ID值，而无需jQuery

HTML文件

<select #myselect>
    <option *ngFor="let title of titleArray" [attr.data-id]="title.cus_id" [value]="title.Value">
      {{title.Text}}
    </option>
</select>

 <button (click)="save(myselect)">Save data</button>  

TS文件

save(e:any){
  let cus_id=e.getAttribute('data-id');
  alert(cus_id)
}

Answer 1

我们可以创建两种绑定，并将“选定”值选项保存到变量。因为这是常规的HTML选择，我们使用[（ngmodel）]进行两种绑定。

另外，使用JavaScript title.text.text - ＆gt; title.text，mySelect - ＆gt; mySelect，title.value - ＆gt; title.Value等。

然后，我们可以访问变量选择在上处理（单击）事件，触发功能onsave（） /代码>单击代码的打字稿部分。

我使用？访问属性以有条件地检查道具时首先存在，以防万一。

我使用parseint（）将cus_id从模板作为字符串，回到一个数字。

如果您不打算覆盖变量优先const而不是让。

避免任何类型e：任何 - ＆gt; e：事件如果可能的话（尽管在我的示例中不需要）。

如果可能的话，始终更喜欢使用接口或类的强键打字，从长远来看，它将为您提供帮助，这就是打字稿的美 - 我们强大的东西。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  selected: string;

  titleArray: Title[] = [
    { cus_id: 1, text: 'Hancook', value: '123' },
    { cus_id: 2, text: 'I am legend', value: '456' },
    { cus_id: 3, text: 'Amber the turd', value: '789' },
  ];

  onSave() {
    console.log('now saving: ', this.selected);
    const arrayItem = this.titleArray.find((item) => item.cus_id === parseInt(this.selected));
    window.alert(JSON.stringify(arrayItem));
  }
}

export interface Title {
  cus_id: number;
  text: string;
  value: string;
}

html

<select #myselect [(ngModel)]="selected">
  <option *ngFor="let title of titleArray" [value]="title?.cus_id">
    {{ title?.text }}
  </option>
</select>

<br />
<br />

<button (click)="onSave()">Save data</button>

这可以进一步简化而不是使用[value] =“ title？.cus_id”我们可以做[value] =“ title”并传递OBJ title to variable 选择，那么我们就不必从titlearray []或使用parseint（） interpallate（）代码> - 但这取决于您。

工作示例： https://stackblitz.com/edit/Edit/EDIT/Angular5-select-option-option-dropdown-qt4yvp?file=src%2fapp%2fapp%2fapp%2fapp%2fapp; 。

​

Answer 2

在Angular中，我们有两种正确的方式来管理形式，构建反应性形式和模板驱动的形式。我建议您在

也就是说，我认为要使用模板驱动的表单最适合您的特定用例，并且您最终希望获得所选title> title的cus_id属性。

步骤1：导入formsModule

在您的应用/root模块中（或声明组件的模块），导入formsmodule。

import { FormsModule } from "@angular/forms";

@NgModule({

  imports: [

    FormsModule, //