Question

我正在构建一个Angular应用。我需要为每个按钮添加不同的图像。

HTML：

<div *ngFor="let Items of myItems">
    <button class="close-image"><img src="../../assets/img/flower.png">
        <span>         
        </span> 
    </button>
</div>

从上面的代码我创建按钮取决于响应（例如：四个按钮），所有按钮包含相同的图像。我应该如何为这些ngFor按钮添加不同的图像？

Answer 1

您可以使用输入绑定Button sendRequest = (Button) this.findViewById(R.id.bt_send_request); sendRequest.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if(choosenLatLng == null || myTime == null){ Toast.makeText(JobRequestActivity.this, "you need to enable location permission first", Toast.LENGTH_LONG).show(); return; } DatabaseReference mJobDatabase = FirebaseDatabase.getInstance().getReference().child("Jobs").child("beersheva").push(); mJobDatabase.child("costumer").setValue(FirebaseAuth.getInstance().getCurrentUser().getUid()); mJobDatabase.child("date1").setValue(myTime); mJobDatabase.child("duration").setValue(duration.getSelectedItem()); mJobDatabase.child("phone number").setValue("default"); mJobDatabase.child("jobtype").setValue(jobType.name()); mJobDatabase.child("location").setValue(new LatLng(31.246897, 34.792883)); mJobDatabase.child("job picture").setValue("default"); updateUI(); } }); private void updateUI() { //TODO determine where to go Intent intent = new Intent(JobRequestActivity.this, MainCustomerActivity.class); startActivity(intent); }来指定属性的来源。我们假设[src]具有Items属性：

imgSrc

如果需要指定路径

，也可以在此绑定中连接字符串

<div *ngFor="let item of myItems">
  <button class="close-image"><img [src]="item.imgSrc">
    <span>{{item.text}}</span> 
  </button>
</div>

这假设[src]="'../../assets/img/' + item.imgSrc"看起来像这样（无论是来自服务器还是硬编码）：

myItems

Answer 2

HTML

<img *ngFor="let image of images" [src]="image">

成分</ P>

images = [
  'path/to/image/1',
  'path/to/image/2',
  'path/to/image/3',
];

动态添加图像

2 个答案: